标签:算法 遍历数组 更新 数组 uid for code data 其他
注:item获得的都是值而不是下标
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>
非常常用的方法为splice
splice作用:删除、添加和替换元素
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‘
//set(要修改的对象,索引值,修改后的值)
Vue.set(this.letters, 0, ‘bbbb‘)
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>
标签:算法 遍历数组 更新 数组 uid for code data 其他
原文地址:https://www.cnblogs.com/zhihaospace/p/12099971.html