vue 列表循环渲染

最新推荐文章于 2023-07-06 14:03:03 发布

上晴下雪

最新推荐文章于 2023-07-06 14:03:03 发布

阅读量548

点赞数

分类专栏： vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/xueerkeji/article/details/106247160

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>Vue 列表循环</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
	<!--
		1.v-for 循环带上key(增加性能),key是唯一值，不能索引，一般是主键ID
		2.vue 不能通过下标的方式更新数组，但能更新对象，（仅仅是更新，增加都不能），使用变异方法
		3.变异方法操作数组 pop//删除最后一项,并返回最后一项；push//未尾添加一个，多个元素，并返回新长度；
						shift//删除第一项，并返回第一项;unshift//开头添加一个，多个元素，并返回新长度
						splice//删除指定位置元素，并可插入相关元素splice(2,1,{id:100,text:'位置2，一个元素'})
						sort//支数组进行排序
						reverse//颠到数组元素
		4.改变数组引用地址
		5.template模板占位符，可以不显示html
		
	-->
	<div id="app">
		<template v-for="(item,index) of list"
			:key="item.id">
			<div>
			{{item.text}}--{{item.id}}--{{index}}
			</div>
			<span>
				{{item.text}}
			</span>
		</template> 
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				list:[
					{id:100,text:"hellow"},
					{id:101,text:"world"},
					{id:102,text:"你好"}
				]
			}
		})
		
	</script>
</body>
</html>

上晴下雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 列表循环渲染

<!DOCTYPE html><html><head> <title>Vue 列表循环</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script></head><body> <!-- 1.v-for 循环带上key(增加性能),key是唯一值，不能索引，一般是主键ID 2.vue 不能通过下标的方式更新数
复制链接

扫一扫