vue 第七天（循环遍历）

v-for循环

1、v-for 遍历数组

数组语法 v-for="(要循环的定义的变量,index 也就是下标) in 要循环的数组"

v-for="(item,index) in name" 加下标

v-for=“item in name” 不加下标

<!-- v-for 表达式-->
<div id="vue_one"><ul><li v-for="(value,index) in name">{{value}}/{{index}}</li></ul>
</div>
<script type="text/javascript">const vm = new Vue({el: '#vue_one',data: {name: ["13","qwe","qrq"]}})
</script>

2、v-for 遍历对象

对象语法 v-for="(要循环的定义的变量,对象的key键,index 也就是下标) in 要循环的数组"

v-for="(item,key) in name" 不加下标加key键

v-for=“item in name” 不加下标

<!-- v-for 表达式-->
<div id="vue_one"><ul><li v-for="(value,key,index) in name">{{key}}/{{value}}/{{index}}</li></ul>
</div>
<script type="text/javascript">const vm = new Vue({el: '#vue_one',data: {name: {zhangsan:"100分",lisi:"80分",wangwu:"85分",zhaoliu:"90分",tianqi:"100分"}}})
</script>

3、v-for 绑定 :key与不绑定 :key的区别

:key=“要遍历的变量” 或者 :key=“要遍历的变量.key值”

<!-- v-for 表达式-->
<div id="vue_one"><ul><li v-for="(value,key,index) in name" :key="value.lisi">{{key}}/{{value}}/{{index}}</li></ul><ul><li v-for="(value,key,index) in name" :key="value">{{key}}/{{value}}/{{index}}</li></ul>
</div>
<script type="text/javascript">const vm = new Vue({el: '#vue_one',data: {name: {zhangsan:"100分",lisi:"80分",wangwu:"85分",zhaoliu:"90分",tianqi:"100分"}}})
</script>

绑定 :key

key :0<----->1
key :1<----->2
key :2<----->3
<-----------------------key:10<-->9在此处插入，就相当于原来的数据，移动了一下位置，性能好
key :3<----->4
key :4<----->5
key :5<----->6
key :6<----->7
key :7<----->8

不绑定 :key

key :0<----->1
key :1<----->2
key :2<----->3
<-----------------------key:10<-->9在此处插入 后面的数据都会更新，效果性能不好
key :3<----->4
key :4<----->5
key :5<----->6
key :6<----->7
key :7<----->8

4、数组中的响应式方法

4.1 push 添加

this.定义的数组.push(‘aaa’)

this.定义的数组.push(‘aaa’,‘bbb’,‘cccc’)

4.2 pop 删除数组中的最后一个元素

this.定义的数组.pop()

4.3 shift 删除数组中的第一个元素

this.定义的数组.shift()

4.4 unshift 在数组最前面添加元素

this.定义的数组.unshift()

this.定义的数组.unshift(‘aaa’,‘bbb’,‘ccc’)

4.5 sort 数组的排序

this.定义的数组.sort()

4.6 reverse 数组的翻转

this.定义的数组.reverse()

4.7 splice作用：删除元素/插入元素/替换元素

4.7.1 删除元素

this.定义的数组.splice(定义的数组,要删除的长度)
如果不写要删除的长度的话就会删除所有

4.7.3 插入元素

this.定义的数组.splice(定义的数组,0,value1,value2…)

4.7.3 替换元素

就是删除元素在进行添加

this.定义的数组.splice(定义的数组,从0开始要替换的长度,value1,value2…)

也可以通过下标进行修改数组

this.定义的数组.splice(从哪里开始（不修改的位置）,要替换的长度,value1,value2…)

花开一千年,花落一千年,花叶永不见