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綁定學生的編號。

那么反向添加的時候，選中的在只是數組的位置不變。但是元素發生變化。

比如首次選中的是數組的第二個元素。

如果添加了學生，選中的依然是數組的第二個元素，而不是第一次選擇的元素。