码迷,mamicode.com
首页 > 其他好文 > 详细

vue学习(十一) v-for使用的注意事项:2.2.0+之后的版本里,当在组件中使用v-for时,key是必须的,它是用来表示唯一身份的

时间:2019-05-03 18:31:38      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:NPU   数字类型   绑定   data   数字   ber   表示   cli   list   

//html
<div id="app">
  <div>
   <label>id
    <input type="text" v-model="id"/>
   </label>
  
   <label>name
     <input type="text" v-model="name"/>
   </label>

   <input type="button" value="添加" @click="add"/>
  </div>
  //注意v-for循环的时候, key属性只能使用string或者number
  //注意key在使用的时候 必须使用v-bind 属性绑定的形式,指定key的值
  <p v-for="item in list" v-bind:key="item.id">
    <input type="checkbox"/>{{item.id}}---
    {{item.name}}
  </p> </div> //script <script>   var vm = new Vue({     el:app,     data:{
      id:‘‘,
      name:‘‘,       list:[
        {id:1, name:‘韩非‘},
        {id:2, name:‘魏庄‘},
        {id:3, name:‘张良‘},
        {id:4, name:‘紫女‘}
      ]
    },     methods:{//methods中定义了当前vue实例中所有可用的方法       add(){
        this.list.unshift({id: this.id, name: this.name})
      }
    }   }) </script>

注意:

在组件中,使用v-for循环的时候,或者在一些特殊情况下,如果v-for有问题,必须在使用v-for的同时,指定唯一的字符串、数字类型的key,并且要为key使用v-bind

vue学习(十一) v-for使用的注意事项:2.2.0+之后的版本里,当在组件中使用v-for时,key是必须的,它是用来表示唯一身份的

标签:NPU   数字类型   绑定   data   数字   ber   表示   cli   list   

原文地址:https://www.cnblogs.com/xuchao0506/p/10805815.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!