<body>
<!--
使用v-for的时候需要指定key属性,key属性需要唯一
vue采用的更新策略:就地更新: 极大限度在原来的基础上去更新,保证需要修改的元素的个数是最少的
给列表添加数,导致数据的顺序发生改变的时候,只要不是在最后添加元素
-->
<div id="app">
<button @click="add">增加</button>
<ul>
<li v-for="item in list" :key="item.id">
<span><input type="text"></span>
<p>{{item.name}}</p>
<p>{{item.gender}}</p>
</li>
</ul>
</div>
<script src="vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
list: [
{id: 1, name: 'zs', gender: '男'},
{id: 2, name: 'ls', gender: '男'},
{id: 3, name: 'ww', gender: '女'},
{id: 4, name: 'zl', gender: '男'}
]
},
methods: {
add() {
this.list.unshift({id: 5, name: 'tq', gender: '女'})
}
}
})
</script>
</body>
v-for的key属性
最新推荐文章于 2024-05-30 07:23:43 发布