vue学习之列表渲染

最新推荐文章于 2024-08-15 12:28:07 发布

想要飞翔的企鹅

最新推荐文章于 2024-08-15 12:28:07 发布

阅读量340

点赞数

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

本文链接：https://blog.csdn.net/PhilsphyPrgram/article/details/122103804

版权

vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

v-for遍历的演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>菜鸟教程(runoob.com)</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	    <div id="demo">
	    	<ul v-for="(person,index) in persons" :key="index">
	    		{{index}}---{{person.name}}---{{person.age}}
	    		---<button @click="deleteP(index)">删除</button>
	    		---<button @click="updateP(index,{name:'二狗',age:23})">更新</button>
	    	</ul>
	    </div>
		<script type="text/javascript">
			//Vue只是监视了persons的改变，没有监视数组内部数据的改变
			//Vue重写了数组中的一系列改变数组内部数据的方法(先调用原生，在更新页面)----》数组内部改变，界面自动变化
			new Vue({
				el:'#demo',
				data:{
					persons:[
						{name:'张三',age:18},
						{name:'李四',age:19},
						{name:'王五',age:20}
					]
				},
				methods:{
					deleteP(index){
						this.persons.splice(index,1)
					},
					updateP(index,newP){
						this.persons.splice(index,1,newP)
					}
					
				}
			})
		</script>
	</body>
</html>

想要飞翔的企鹅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习之列表渲染

v-for遍历的演示：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>菜鸟教程(runoob.com)</title> <script src="vue.js" type="text/javascript" charset="utf-8"></script> </head> <body>
复制链接

扫一扫

专栏目录