<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="root">
<button type="button" @click.once="add">点击增加一个老刘</button>
<ul>
<li v-for="(p,index) in persons" :key="p.id">
{{p.name}}-{{p.id}}--{{p.age}}-{{index}}
<input type="text" v-model="p.name"/>
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el: '#root',
data: {
persons: [{
id: '001',
name: '张三',
age: 18
},
{
id: '002',
name: '张三',
age: 19
},
{
id: '003',
name: '张三',
age: 20
}
],
},
methods: {
add() {
const p = {
id: '004',
name: '老刘',
age: 40
};
this.persons.unshift(p);
}
}
})
</script>
22.Vue-key作用与原理
最新推荐文章于 2023-08-07 22:30:05 发布