vue key的作用

最新推荐文章于 2023-06-24 14:10:41 发布

漫漫人生路^_^

最新推荐文章于 2023-06-24 14:10:41 发布

阅读量61

点赞数

分类专栏：前端

本文为博主原创文章，未经博主允许不得转载

本文链接：https://blog.csdn.net/qq_46198929/article/details/123405328

版权

vue.js javascript 前端

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
		<title></title>
		
		
		<script src="../js/vue.js" type="text/javascript"></script>
		
		<script src="../js/jquery-3.6.0.js"></script>
		<style>
			
		</style>
	</head>
	<body>
			<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
			<!--
			<div id="app">
			  <h1>Hello App!</h1>
			  <p>
			    
				<input type="text" v-model="yname">
				<p>{{yname}}</p>
			    <router-link :to="{name:yname}">foo</router-link>
			    <button type="button" @click="test">按钮</button>
			  </p>
			  
			  <router-view></router-view>
			</div>
			-->
			<!--
			<script>
				const Foo = { template: '<div style="border:red 1px solid">foo</div>' };
				const Bar = { template: '<div style="border:blue 1px solid">bar</div>' };
				
				const router = new VueRouter({
				  routes: [
				  { path: '/foo', name:'foo', component: Foo },
				  { path: '/bar', name:'bar', component: Bar }
				]
				});
				
				
				const app = new Vue({
				  router:router,
				  data:{
					  yname:'foo'
				  },
				  methods:{
					  test:function(){
						  router.push("/bar")
					  }
				  }  
				}).$mount('#app')

			</script>
			-->
			
			<div  id="app">
			<button type="button" @click="add">add</button>
			<li v-for="pes,index in persons" :key="pes.id">
				<a>{{pes.id}}</a>
				<a>{{pes.name}}</a>
				<a>{{pes.age}}</a>
				<input type="text">
			</li>
			</div>
			<script type="text/javascript">
				let vm=new Vue({
					el:'#app',
					data:{
						persons:[
							{id:"003",name:"张三",age:19},
							{id:"005",name:"李四",age:19},
							{id:"007",name:"王五",age:19},
						]
					},
					methods:{
						add(){
							const p={id:"009",name:"赵六",age:19};
							this.persons.unshift(p);
						}
					}
				});
			</script>
	</body>
</html>

在这里插入图片描述
改为:key=“pes.id”

漫漫人生路^_^

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue key的作用

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <title></title> <script src="../js/vue.js" type="text
复制链接

扫一扫