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繫結學生的編號。

那麼反向新增的時候，選中的在只是陣列的位置不變。但是元素髮生變化。

比如首次選中的是陣列的第二個元素。

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