09 Vue中的列表渲染列表使用汇总

技术~子云

已于 2022-10-22 23:50:59 修改

阅读量203

点赞数

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

于 2022-10-22 23:24:45 首次发布

本文链接：https://blog.csdn.net/davice_li/article/details/127468344

版权

vue 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

例子：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Vue中的列表渲染</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<div v-for="(item,index) of list">{{item}} --- {{index}}</div>

		</div>

		<script type="text/javascript">
			
			var vm = new Vue({

				el:"#app",
				data:{
					
					list:["data","wallace","last","asli"]
				},
				methods:{
					
				}
			})
		</script>

	</body>
</html>

list中加入key的方法，项目中经常使用到这种情况

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Vue中的列表渲染</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<!--key 值使用唯一的值 ，不要使用index做为key 值，比较耗性能-->
			<div v-for="(item,index) of list"  :key="item.id">
			{{item.name}} --- {{index}}
			</div>

		</div>

		<script type="text/javascript">
			
			var vm = new Vue({
				//
				el:"#app",
				data:{
					
					list:[
					{
						id:"id0001",
						name:"wallace"
					},{
						id:"id0002",
						name:"eric"
					},{
						id:"id0003",
						name:"jack"
					}]
				},
				methods:{
					
				}
			})
		</script>

	</body>
</html>

这时候在控制台增加列表中的数据，页面的数据并没有增加。这时应该怎么让数据跟着一起更新呢

让列表改变引用可以触发页面的变更如下图所示，达到数据变化，页面也变化

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Vue中的列表渲染</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<!--key 值使用唯一的值 ，不要使用index做为key 值，比较耗性能-->
			<div v-for="(item,index) of list"  :key="item.id">

				<div>
					{{item.name}} --- {{index}}
				</div>

				<span>
					{{item.name}}

				</span>

			</div>
		</div>

		<script type="text/javascript">
			//push  pop  shift  unshift  splice sort reverse  这几个方法可以改变引用，这时触发页面改变
			var vm = new Vue({
				//
				el:"#app",
				data:{
					list:[
					{
						id:"id0001",
						name:"wallace"
					},{
						id:"id0002",
						name:"eric"
					},{
						id:"id0003",
						name:"jack"
					}]
				}
			})
		</script>

	</body>
</html>

四、对象循环方法汇总说明

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Vue中的列表渲染</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<div v-for="(item,key,index) of userInfo">{{item}}--{{key}}---{{index}}</div>
		</div>

		<script type="text/javascript">
			//push  pop  shift  unshift  splice sort reverse  这几个方法可以改变引用，这时触发页面改变
			var vm = new Vue({
				//
				el:"#app",
				data:{
					userInfo:{
						name:"walalce",
						age:12,
						gender:"male",
						secrt:1200
					}
				}
			})
		</script>

	</body>
</html>

对象中的属性值发生更新时，页面的数据会发生变更

增加了address属性，但是页面并没有更新数据

通过改变引用对象来让页面的数据改变时，页面也发生变更

使用 vue.set方法设置值来更新页面的数据

使用内部对象vm.$set 方法进行设置

数组的变化使用Vue.set()方法，来改变数组的页面的更新

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Vue中的列表渲染</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<div v-for="(item,index) of userInfo">{{item}}---{{index}}</div>
		</div>

		<script type="text/javascript">
			//push  pop  shift  unshift  splice sort reverse  这几个方法可以改变引用，这时触发页面改变
			var vm = new Vue({
				//
				el:"#app",
				data:{
					userInfo:[1,2,3,4,5]
				}
			})
		</script>

	</body>
</html>