米鼠商城

多快好省,买软件就上米鼠网

最新项目

人才服务

靠谱的IT人才垂直招聘平台

Vue,for循环的key值绑定

  • xym01
  • 1
  • 2020-06-30 12:03
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <script src="../js/vue.js"></script> 8 <body> 9 <div id="app"> 10 11 <!-- 尾部添加 12 <div> 13 <label for=""> 14 ID: 15 <input type="text" v-model="id" /> 16 </label> 17 18 <label for=""> 19 Name: 20 <input type="text" v-model="name" /> 21 </label> 22 23 <input type="button" name="" id="" value="尾部添加" @click="wadd"/> 24 </div> --> 25 26 <div> 27 <label for=""> 28 ID: 29 <input type="text" v-model="id" /> 30 </label> 31 32 <label for=""> 33 Name: 34 <input type="text" v-model="name" /> 35 </label> 36 37 <input type="button" name="" id="" value="头部添加" @click="tadd"/> 38 </div> 39 40 <!-- 注意: v-for 循环的时候, key属性 只能用number 或 string, item是个对象 不能使用--> 41 <!-- 注意:key在使用的时候,必须使用 v-bind 属性绑定,指定 key 的值--> 42 <!-- 在组件中, 使用 v-for循环的时候,或者在一些特殊情况中,如果 v-for 有问题,必须 在使用 43 v-for 的同时,指定 唯一的 字符串/数字 类型 :key 值 比如如果不绑定的话 多选按钮 无法绑定 44 item数组里的选中的数据--> 45 <p v-for="item in list" :key="item.id"> 46 <input type="checkbox" /> 47 {{ item.id}} --- {{ item.name }} 48 </p> 49 </div> 50 </body> 51 </html> 52 <script> 53 var vm = new Vue({ 54 el:'#app', 55 data:{ 56 id:'', 57 name:'', 58 list:[ 59 { id: 1, name: '哈哈' }, 60 { id: 2, name: '嘿嘿' }, 61 { id: 3, name: '呵呵' }, 62 { id: 4, name: '啦啦' }, 63 { id: 5, name: '叽叽' } 64 ] 65 }, 66 methods:{ 67 // // 尾部添加 68 // wadd(){ 69 // this.list.push({ id: this.id, name: this.name}) 70 // }, 71 //头部添加 72 tadd(){ 73 this.list.unshift({ id: this.id, name: this.name}) 74 }, 75 } 76 }) 77 </script>

这里给大家推荐一个在线软件复杂项交易平台:米鼠网 https://www.misuland.com

米鼠网自成立以来一直专注于从事软件项目人才招聘软件商城等,始终秉承“专业的服务,易用的产品”的经营理念,以“提供高品质的服务、满足客户的需求、携手共创双赢”为企业目标,为中国境内企业提供国际化、专业化、个性化、的软件项目解决方案,我司拥有一流的项目经理团队,具备过硬的软件项目设计和实施能力,为全国不同行业客户提供优质的产品和服务,得到了客户的广泛赞誉。



如有侵权请联系邮箱(service@misuland.com)

猜你喜欢

评论留言