22.Vue-key作用与原理

最新推荐文章于 2023-08-07 22:30:05 发布

修罗_

最新推荐文章于 2023-08-07 22:30:05 发布

阅读量156

点赞数

分类专栏： VUE 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45843676/article/details/122988923

版权

VUE 专栏收录该内容

93 篇文章 2 订阅

订阅专栏

<!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>