一、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