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


    //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

  • 相关阅读:
    进位的算法
    java操作mysql中的编码问题解决
    ajax
    java.lang.NoClassDefFoundError: org/objectweb/asm/Type
    java.lang.NoSuchFieldError: deferredExpression
    java.lang.NoClassDefFoundError: antlr/ANTLRException
    Missing message for key "err1" in bundle "(default bundle)" for locale zh_CN
    接口和抽象类
    overload和override
    public,protected,friendly,private的访问权限
  • 原文地址:https://www.cnblogs.com/xuchao0506/p/10805815.html
Copyright © 2020-2023  润新知