v-show指令
什么是v-show指令
v-show指令就是专门控制一个元素显示或者隐藏的指令
何时使用v-show指令
今后,只要是想控制一个元素的显示或者隐藏,都用v-show指令
如何使用v-show指令
<元素 v-show="变量或者表达式">
变量或者表达式:就是一个判断条件
原理
每次new Vue()扫描页面时,只要扫描到v-show指令,都会首先计算""中的变量值或者表达式的值
a. 如果""中的变量值或表达式的值为true，则当前元素正常显示
b. 如果""中的变量值或表达式的值为false，则new Vue()自动给当前元素添加display:none属性！当前元素隐藏！
案例
用vue实现对表情的展示与隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
<style>
#pop{
width: 108px;
}
#top>a{
float: right;
margin-right: 25px;
top:25px;
}
</style>
</head>
<body>
<div id="app">
<button @click="open">点击我</button>
<div id="pop" v-show="show">
<img src="img/1.png" alt="">
<a href="javascript:;" @click="close">x</a>
</div>
</div>
<script>
var vim = new Vue({
el:"#app",
//因为界面中只需要一个show变量，所以data中包含一个show变量
data:{
show:false//开始默认隐藏表情包
},
methods:{
open(){
this.show=true;
},
close(){
this.show=false;
}
}
});
</script>
</body>
</html>
v-if/v-else指令
什么是v-if/v-else指令
这两个命令专门在两个元素之中二选一显示的特殊指令
何时使用v-if/v-else指令
今后,只要是想控制两个元素之中二选一显示时,都用v-if和v-else指令
如何使用v-if/v-else指令
<元素1 v-if="变量或者表达式">
<元素2 v-else>
变量或者表达式:就是一个判断条件
原理
每当new Vue()扫描到v-if指令时，都会先计算if后""中的变量或表达式的值。
a. 如果if后""中变量或表达式的值为true，则保留v-if所在的元素，删除v-else所在的元素
b. 如果if后""中变量或表达式的值为false，则删除v-if所在的元素，保留v-else所在的元素。
与v-show指令的差别
- v-show : display:none方式隐藏元素
- v-if : 删除元素方式隐藏元素
注意
- v-if和v-else所在的两个元素,必须紧挨着写,中间不能插入其他元素
- v-else和程序中的else一样,之后不用写任何条件
为什么删除了的元素,还能再回到页面上?还能来回切换?
原因:所有带指令的元素,其实都被保存在内存中的虚拟DOM树中,不会被删除,被删除的只是真是DOM树上的元素对象,每次new Vue()都会根据变量值不同,重新指派虚拟DOM树中的元素对象,重现出现在页面上
只要虚拟DOM树中有这个元素,这个元素就可以随时回到页面中
案例
切换登录状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="isLogin">
<h3>Wlecome gavin <a href="#" @click="logout">注销</a>
</h3>
</div>
<div v-else>
用户名:<input>
密码:<input>
<a href="#">注册</a>
<a href="#" @click="login">登录</a>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
isLogin:false//默认是没有登录状态
},
methods:{
login(){
this.isLogin=true
},
logout(){
this.isLogin=false
}
}
});
</script>
</body>
</html>
运行结果
v-else-if指令
什么是v-else-if指令
专门控制多个元素选其一显示的特殊指令
何时使用v-else-if指令
今后只要在多元素中选其一显示，都要使用v-else-if指令
如何使用v-else-if指令
<元素1 v-if="条件1">
<元素2 v-else-if="条件2">
<元素n v-else-if="条件n">
<元素 v-else>
原理
每当new Vue()扫描到v-if指令时，都会先计算if后""中的变量或表达式的值。
a. 如果if后""中变量或表达式的值为true，则保留v-if所在的元素，删除其余v-else-if和v-else所在的元素。
b. 如果if后""中变量或表达式的值为false，new Vue()会继续计算后续v-else-if中的条件表达式。如果某个v-else-if中的条件为true，则只保留这个v-else-if所在的元素，删除其余v-if、v-else-if、v-else所在的元素。
c. 除非所有条件都不满足要求，则删除所有v-if、v-else-if所在元素，只保留v-else所在元素。
注意
v-if /v-else-if/ v-else 几个元素必须连续写，中间不能插入其他元素
案例
根据不同的pm数值，显示不同的表情
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<img v-if="pm<20" src="img/1.png" alt="">
<img v-else-if="pm<50" src="img/2.png" alt="">
<img v-else-if="pm<100" src="img/3.png" alt="">
<img v-else src="img/4.png" alt="">
</div>
<script>
var vim =new Vue({
el:'#app',
data:{
pm:'60'
}
});
</script>
</body>
</html>
v-for指令
什么是v-for指令
专门遍历一个数组，反复生成多个相同结构的元素的特殊指令
何时使用v-for指令
只要反复生成多个相同结构的元素时，都用v-for
如何使用v-for指令
<要重复生成的元素 v-for="(元素值, 下标) of 数组">
原理
当new Vue()扫描到v-for时，都会先遍历of后的数组中每个元素，每遍历一个元素，就取出每个元素值和下标位置，保存到of前的变量中。每遍历一个元素，v-for同时都会创建当前HTML元素的副本。在v-for所在的当前元素中，及其子元素中，元素值和下标可用于各种指令和绑定语法
注意
a. v-for一定要放在要反复生成的元素上！不能放在要反复生成的元素的父元素上。
b. 按标准来说，()必须加！有时，去掉()虽然正确。但是将来公司中都会启用代码质量检查工具！代码质量检查工具认为！不加()是不规范的，会报错！
c. 其实, of也可以换成in。但是，of和in的效果完全一样！没有差别强调
坑: VUE中，使用下标修改数组中的元素值，界面上是不会自动跟着变的！
原因: VUE框架只监控自定义下标的属性名和方法名，无法监控数字下标！
解决: 今后在vue中只要修改数组中的元素值，都用splice函数使用替换的方式来修改。
this.数组.splice(i,1,新元素值)
删除i位置的一个值
再在i位置插入一个值
问题
即使只修改了数组中一个元素，v-for也会傻乎乎的重建整个界面中的列表。——完全没必要，且效率极低
解决方案
今后，只要使用v-for，几乎都要绑定一个特殊属性":key"，且绑定给:key的属性值变量，值应该是唯一的！
<要重复生成的元素 v-for="(元素值, 下标) of 数组" :key="下标">
好处
a. 今后每个v-for反复生成的HTML元素副本上都带有一个隐藏的且值唯一的key属性。
b. 从此v-for如果只更新一个元素值，就可通过key属性值找到要修改的一个HTML元素，只更新一个HTML元素即可，不用重建整个列表——效率高
遍历内容
v-for因为统一了js中的for of和for in，所以v-for不但可以遍历索引数组，还能变量对象属性！
<要重复生成的元素 v-for="(属性值, 属性名) of 对象" :key="属性名">
案例
使用v-for遍历数组和对象，反复生成多个页面元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(arr ,i) of arrs" :key="i">
{{i+1}}---{{arr}}
</li>
</ul>
<br>
<ul v-for="(arr,i) of arrs" :key="i">
<li v-for="(value,name) of obj" :key="name">
{{arr}}--> {{name}}-->{{value}}
</li>
</ul>
<br>
<ul >
<li v-for="(j) of pageCount" :key="j">
{{j}}
</li>
</ul>
</div>
<script>
var vim = new Vue({
el:'#app',
data:{
arrs:["小米","华为","苹果","vivo"],
obj:{
name:"liq",
age:"12",
class:"171班"
},
pageCount:6
}
});
</script>
</body>
</html>
v-for计数
<要重复生成的元素 v-for="(i) of 整数" :key="i">
v-for自动从1开始连续数数，每数一个数，就自动创建当前元素的一个副本。直到数到of后的整数为止
案例:根据总页数，生成分页按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
<style>
ul{
list-style: none;
}
ul>li{
float:left;
width:40px;
height:40px;
text-align:center;
line-height:40px;
border:1px solid #555;
border-radius: 5px;
margin-left:5px;
}
ul>li:hover{
cursor:pointer;
background-color:lightskyblue;
color:#fff;
border:0;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="i of pageCount" :key="i">{{i}}</li>
</ul>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
pageCount:6 //共6页
}
})
</script>
</body>
</html>
运行结果：
