<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .userList { border: 1px solid red; margin: 20px 0; padding: 10px 10px; } </style> </head> <body> <div id="app"></div> <script type="text/javascript" src="../js/vue.min.js"></script> <script src="lodash.min.js"></script> <script type="text/javascript"> Vue.component('my-com', { template: ` <div class = 'userList'> <div class = 'content'> <h3>{{obj.name}}</h3> <p>{{obj.content}}</p> </div> <div class ='control'> <input type="text" placeholder = '请输入你的名字' /> </div> </div> `, props: { obj: Object } }) var App = { data() { return { datas: [{ id: 1, name: '张三', content: '我是张三' }, { id: 2, name: '李四', content: '我是李四' }, { id: 3, name: '王五', content: '我是王五' } ] } }, template: ` <div> <button @click = 'change'>改变顺序</button> <my-com v-for = '(item,index) in datas' :obj = 'item' :key = 'item.id'></my-com> </div> `, methods: { change() { console.log(1); this.datas = _.shuffle(this.datas); } } }; new Vue({ el: '#app', components: { App }, template: `<App />` }); </script> </body> </html>
v-for 中的 key
猜你喜欢
转载自www.cnblogs.com/jwen1994/p/10993424.html
今日推荐
周排行