vue的列表渲染

最新推荐文章于 2024-03-17 22:53:53 发布

LLL_LH

最新推荐文章于 2024-03-17 22:53:53 发布

阅读量546

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/LLL_liuhui/article/details/90209993

版权

Vue 专栏收录该内容

57 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 数组元素 of可以代替in作为分隔符-->
			<div v-for="(item,index) in list">
				{{item.name}}----{{index}}
			</div>
			<div>-----------------------------</div>
			<div v-for="(item,index) of list">
				{{item.name}}----{{index}}
			</div>
			<div>-----------------------------</div>
			
			<!-- 对象迭代三个参数，第一个属性值，第二个属性名称，第三个索引号 -->
			<div v-for="(value,name,index) in userInfo">{{name}}---{{value}}---{{index}}</div>
			<div>----------------------------</div>
			<div v-for="(value,name,index) of userInfo">{{name}}---{{value}}---{{index}}</div>
			
			<div>{{evens}}</div>
		</div>
		<script>		
			let app = new Vue({
				el: '#app',
				data: {
					list: [
						{
							id: 001,
							name: 'html'
						},
						{
							id: 002,
							name: 'css'
						},
						{
							id: 003,
							name: 'js'
						}
					],
					userInfo: {
						name: 'Ann',
						age: 20,
						sex: 'women'
					},
					number: [1,2,3,4,5]
				},
				computed: {
					evens(){
						return this.number.filter((num)=>{
							return num%2==0
						})
					}
				}
			})
			
			//vue.js的变异方法: push(),pop(),shift(),unshift(),splice(),sort(),reverse()
			//非变异方法:filter(),concat(),slice(),返回一个新数组 
			
			//给列表添加新元素
			app.list.push({id: 004,name: 'vue.js'})
			//复制当前userInfo的所有属性
			let obj = Object.assign({},app.userInfo)
			console.log(obj) 
			// {age: 20,name: "Ann",sex: "women"}
			//添加多个属性
			app.userInfo = Object.assign({},app.userInfo,{
				address: 'beijing',
				mobile: '11111111111'
			})
			//修改列表元素
			//方法一: Vue.set(vm.prop,index,newValue)
			Vue.set(app.list,1,{id: 007,name: 'i is 007'})
			//方法二:vm.$set实例方法是Vue.set全局方法的别名
			app.$set(app.list,0,{id: 001,name: 'this is 001'})
			
			//修改数组长度 splice(),用于添加删除元素,从下标1开始,删除2个元素
			app.list.splice(1,2)
		</script>
	</body>
</html>

LLL_LH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue的列表渲染

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="a...
复制链接

扫一扫