vue的简单使用3-v-for、v-if、v-show等指令的使用

Vue中v-for、v-if、vshow等指令的使用

v-for指令

v-for指令使用来迭代遍历的，可以遍历数组、对象数组、对象和数字

遍历数组
```
<div id="head"><p v-for="arr in array1">{{arr}}</p>
</div>
<script>let vue1 = new Vue({el: "#head",data: {array1: ['a', 'b', 'c', 1, 2, 3]}});
</script>
```
首先在data中定义了一个数组array1，然后在p元素中使用v-for来遍历数组，类似于for-each循环，这样array1中的每一项的值都会存入到arr中，然后使用插值表达式{{}}将arr渲染出来

运行截图：

可以看到数组array1的值在网页中渲染出来了

修改上面的代码（p元素的代码）
```
<div id="head"><p v-for="(value, index) in array1">--值是{{value}} ----索引是{{index}}</p>
</div>
<script>let vue1 = new Vue({el: "#head",data: {array1: ['a', 'b', 'c', 1, 2, 3]}});
</script>
```
可以看到v-for改成了v-for="(value, index) in array1"，其中括号中的value（第一个）代表遍历的值，index（第二个）代表索引（下标，从0开始），然后在插值表达式中就可以获取出来值和索引，当然里面的单词可以自己写，不一定要写成value和index，

运行截图：

遍历数组对象

修改上面的代码：

<div id="head"><p v-for="arr in array2">---id是{{arr.id}} -----姓名是{{arr.name}}</p>
</div>
<script>let vue1 = new Vue({el: "#head",data: {array2: [{id: 1, name: '嬴政'},{id: 2, name: '刘彻'},{id: 3, name: '杨广'}]}});
</script>

在data中定义了一个对象数组array2,数组中有三个对象，然后在p元素中使用v-for指令遍历array2，通过arr.id的方式获取id,同理获取name。

截图：

遍历对象

继续修改上面的代码
```
<div id="head"><p v-for="(value, key) in obj1">-----值是{{value}} --------键是{{key}} </p>
</div>
<script>let vue1 = new Vue({el: "#head",data: {obj1: {id: 4,name: '朱元璋',sex: '男'}}});
</script>
```
在data中定义一个对象obj1，里面有三个属性（键值对），然后在p元素使用v-for指令遍历obj1，括号中的value（第一个）代表值，例如朱元璋，key（代表键）,例如name,注意值在前，键在后，别写反了

运行截图：
迭代数字

使用v-for指令还可以迭代数字，迭代的数字会从1开始（不是从0）

修改代码
```
<div id="head"><p v-for="number in 10">{{number}}</p>
</div>
<script>let vue1 = new Vue({el: "#head"});
</script>
```
在vue中没有定义data属性，在p元素中使用了v-for=“number in 10”，意思是迭代（遍历）10,从1开始直到10结束

运行截图：

修改p元素的代码：
```
<p v-for="(number,a) in 10">---数字：{{number}} --------索引：{{a}}</p>
```
运行截图：

可以看到迭代数字数字的索引是从0开始的，别搞混了。

key的使用

在使用v-for的时候，会有个小问题，先写代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="libs/vue.js"></script>
</head>
<body>
<div id="head"><!--.number的意思是输入框中的值绑定到vue中时会转换成数字，默认是字符串--><label>id:</label><input v-model.number="id">&nbsp;&nbsp;<label>name</label><input v-model="name">&nbsp;&nbsp;<!--@是v-on:的缩写--><button @click="add">添加</button><p v-for="arr in array"><input type="checkbox"><label>{{arr.id}}---{{arr.name}}</label></p>
</div>
<script>let vue1 = new Vue({el: "#head",data: {id: null,name: null,array: [{id: 1, name: '嬴政'},{id: 2, name: '刘彻'},{id: 3, name: '杨广'}]},methods: {add: function () {//添加对象到数组array的头部this.array.unshift({id: this.id, name: this.name})}}});
</script>
</body>
</html>

运行截图：

在data定义了一个id和一个name,分别用来获取输入框中的值，使用了v-model进行了双向绑定（不知道v-model的可以看前一篇文章），然后定义了一个添加按钮，当按钮按钮时会执行methods中的add函数，将对象添加到array的头部

现在来添加0，朱元璋

截图：

可以发现，数据成功添加进去了，接下来我们勾选2号刘彻再进行添加

添加前截图（勾选2号刘彻）

接下来添加数据0，朱元璋

添加后截图

可以发现刚刚明明勾选的是2号刘彻，添加完数据后竟然勾选的是1号嬴政

官方的解释是：当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

简单的理解（当成数组理解）就是没使用key的话，你勾选的索引为1（第二个）的元素，当添加元素后，勾选的依然是索引为1（第二个）的元素，所以当添加0，朱元璋后，勾选的是1，嬴政，而不是2，刘彻。

那怎样解决这个问题呢，使用key的话可以完美的解决这个问题，给每个元素添加一个key，这个key只能是数字或者字符串，而且是唯一的，而我们的id正好是唯一的，所以修改div中的代码

<div id="head"><label>id:</label><input v-model.number="id">&nbsp;&nbsp;<label>name</label><input v-model="name">&nbsp;&nbsp;<!--@是v-on:的缩写--><button @click="add">添加</button><!--:是v-bind:的缩写--><p v-for="arr in array" :key="arr.id"><input type="checkbox"><label>{{arr.id}}---{{arr.name}}</label></p>
</div>

为p元素添加一个:key属性，将key进行单项绑定，key中的arr.id是唯一的，这样就可以为p元素指定一个唯一的key了，这时候再勾选一个元素，vue就是根据key来勾选，当元素索引值发生改变时，勾选的元素不会发生改变

勾选2号刘彻后运行截图：

v-if和v-show的使用与区别

在第一篇中简单的介绍了一下v-if，这次再来介绍一下，并且与v-show进行对比

v-if的使用

v-if的作用可以使一个元素显示或者消失
```
<div id="head"><p v-if="bool">格物致知</p>
</div>
<script>let vue1 = new Vue({el: '#head',data: {bool: true}});
</script>
```
运行后，页面中会显示格物致知四个字，当把bool修改为false后，页面中啥都没有了
- 为true时截图
- 为false时截图
v-show的使用，v-show的作用和v-if的作用差不多

修改上面的代码,将v-if改为v-show,再运行可以发现，和上面的一样，页面中会显示格物致知四个字，当把bool修改为false后，页面中啥都没有了
```
<p v-show="bool">格物致知</p>
```
图就不截了，和上面的图效果一样
两者的区别
- v-if是通过删除或添加元素的方式来实现元素消失和显示
  
  将bool改为false后通过控制台查看p元素
  
  可以看到使用v-show的话，当bool为false的时候，p元素被删除了。
- v-show是通过css样式的方式来实现元素的显示和消失
  
  将bool改为false后通过控制台查看p元素
  
  可以看到使用v-show的话，当bool为false的时候，p元素被添加了一个display为none的属性，从而让元素在页面中消失，
- v-if比v-show更加的耗性能，所以当进行大量的同一元素显示和消失时使用v-show比较好，当需要完全移除一个元素,不让其在代码中显示则可以使用v-if