uni-app v-for中key的作用

v-for中key可以使组件中的数据绑定唯一。

比如以下实例

   <view>
        <view v-for="(stu,index) in stuArray"  :key="stu.id">
            
            <view>
                <checkbox  value="false"/>
                {{"姓名:"+stu.name+",年龄:"+stu.age+",序号:"+index}}
            </view>
            <view>
                擅长技能:
                <block v-for="sk in stu.skills">
                    {{sk}},
                </block>
            </view>
        </view>
        <view>
            <button  @click="addStu">添加新生</button>
        </view>
    </view>

key可以保证新增学生之后，复选框选中的数据不会随着数据增加而变化。

        data() {
            return {
                stuArray:[
                    {id:1,name:"张三",age:12,skills:["Java","C#","Python"]},
                    {id:2,name:"李四",age:13,skills:["Sing","Dance","Rap","Basketball"]},
                    {id:3,name:"王五",age:14,skills:["Piano","Guitar","Trumpet"]}
                ]
            }
        },
        methods: {
            addStu(){
                var len=this.stuArray.length+1;
                var newStu={
                    id:len,
                    name:"新生"+len,
                    age:13,
                    skills:["Chinese","Math"]
                };
                //push表示在数组的尾部进行添加元素
                //this.stuArray.push(newStu);
                
                this.stuArray.unshift(newStu);
            }
        }

unshift表示在数组的首部添加元素。

 

如果不在v-for上添加key绑定学生的编号。

那么反向添加的时候，选中的在只是数组的位置不变。但是元素发生变化。

比如首次选中的是数组的第二个元素。

如果添加了学生，选中的依然是数组的第二个元素，而不是第一次选择的元素。