5.v-for
Posted zhihaospace
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了5.v-for相关的知识，希望对你有一定的参考价值。
1.语法格式：
注：item获得的都是值而不是下标
- 遍历数组：
- v-for="item in items"
- v-for="(item, index) in items"
- 遍历对象：
- v-for="item in items"
- v-for="(item, key) in items"
- v-for="(item, key, index) in items"
2.v-for中添加key
添加key有利于复用，并且希望key为唯一的（希望像Java中的UUID类型），一般不用index，这是根据虚拟DOM的渲染机制算法决定的。
1 <div id="vue"> 2 <li v-for="(item, index) in items" key="item"> 3 {{item.message}}{{index}} 4 </li> 5 </div>
3.数组中那些方法是响应式的
响应式：操作数据会让视图发生对应的更新
- push
- pop
- shift
- unshift
- splice
- sort
- reverse
非常常用的方法为splice
splice作用：删除、添加和替换元素
- 参数1：从哪里开始删除
- 参数2：删除多少个
- 参数3：添加哪些元素
this.letters.splice(1,0,‘x‘,‘y‘,‘z‘) //从位置1开始删除0个再插入x,y,z
this.letters.splice(1,3,‘m‘,‘n,‘l‘) //从位置1开始删除3个再插入m,n,l
this.letters.splice(1,3) //从位置1开始删除3个
直接对数组操作不会没有响应式但的确改变了数组内容：
this.letters[0] = ‘t‘
可以使用Vue自带的方法实现修改响应
//set(要修改的对象,索引值,修改后的值)
Vue.set(this.letters, 0, ‘bbbb‘)
4.让列表中的某一个<li>响应事件
让某一个<li>点击后变红，其他都没有颜色
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .active{ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <div id="vue"> 14 <ul> 15 <li v-for="(item, index) in movies" 16 :class="{active: currentIndex === index}" 17 @click="liClick(index)"> 18 {{index}}-{{item}} 19 </li> 20 </ul> 21 </div> 22 23 <!--导入Vue.js--> 24 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> 25 <script type="text/javascript"> 26 let vm = new Vue({ 27 el: ‘#vue‘, 28 data: { 29 movies: [‘a‘,‘b‘,‘c‘,‘d‘], 30 currentIndex: -1 31 }, 32 methods: { 33 liClick(index){ 34 this.currentIndex = index; 35 } 36 } 37 38 39 }); 40 </script> 41 </body> 42 </html>
以上是关于5.v-for的主要内容，如果未能解决你的问题，请参考以下文章