Vue基础--列表渲染_vue 中用来渲染长列表的组件-CSDN博客

本文链接：https://blog.csdn.net/weixin_43847545/article/details/105500106

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表渲染</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="demo">
			name:<input type="text" v-model="Pname"/><br />
			age:<input type="text" v-model="Page"/>
			<h2>v-for 遍历数组</h2>
			<ul>
				<li v-for="(p,index) in persons" :key="index">{{index}}.{{p.name}}----{{p.age}}-<button @click="updateP(index)">更新</button>-<button @click="deleteP(index)">删除</button></li>
			</ul>
			<h2>v-for 遍历对象</h2>
			<ul>
				<li v-for="attr in persons[1]" :key>{{attr}}</li> <!--一个参数即对象属性的值，两个参数第二个属性为属性名，三个参数，第三个 参数即索引值 -->
				<li v-for="(attr,name) in persons[1]" :key>{{name}}---{{attr}}</li>
				<li v-for="(attr,name,index) in persons[1]" :key>{{index}}-{{name}}---{{attr}}</li>
			</ul>
		</div>
	</body>
	<script>
		new Vue({
			el:"#demo",
			data:{
				persons:[
					{name:'aaa',age:16},
					{name:'bbb',age:16},
					{name:'ccc',age:16},
					{name:'ddd',age:16}
				],
				Pname:'test',
				Page:20
			},
			methods:{
				deleteP(index){
					this.persons.splice(index,1)
				},
				updateP(index){
					var name=this.Pname
					var age = this.Page
					//数组内部数据发生变化 Vue检测不到,不会更新视图,Vue对数组的所有方法进行了重写
					this.persons.splice(index,1,{name:this.Pname,age:this.Page})
				}
			}
		})
		
	</script>
</html>