基础教学（5）"/>
vue基础教学（5）
一、v-for循环
<body><div id="app"><ul><!-- <li v-for="item in names">{{item}}</li><li v-for="(item,index) in names" :key="index">{{item}}--{{index}}</li> --><li v-for="(item,key,index) in user" >{{key+"-"+item+"-"+index}}</li></ul></div><script src="vue.js"></script><script>const app = new Vue({el: "#app",data() {return {names: ["zzz", "ttt", "yyy"],user: {name: "zzz",height: 188,age: 24}}},methods: {},computed: {}})</script></body>二、 v-for使用key
<body><div id="app"><ul><li v-for="item in letters">{{item}}</li></ul><button @click="add1">没有key</button></div><script src="vue.js"></script><script>const app = new Vue({el: "#app",data() {return {letters:['a','b','c','d','e']}},methods: {add1(){this.letters.splice(2,0,'f')}},computed: {}})</script></body>三、v-for循环key原理
数据-虚拟dom-真实dom 改变数据 新的数据-新的虚拟dom-新的真实dom
如果只是单纯的渲染数据完全可以用index作为key 因为他没有改变数据的结构
<body><div id="app"><ul><li v-for="(item,index) in title" :key="item.id">{{item.name}}--<input type="text"></li></ul><button type="button" @click="add">++</button></div><script src="vue.js"></scr更多推荐
vue基础教学（5）
发布评论