master

分支 (1)

管理

管理

master

vue-demo
/
3-8-列表渲染.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>列表渲染</title>
	<script src="vue.js"></script>
</head>
<body>
	<!-- 列表循环 -->
	<!-- template 模板占位符, 不会显示div -->
	<div id="root">
		<template v-for="(item,index) of list" :key="item.id">
			<div>
				{{item.id}} --- {{item.title}} --- {{index}}
			</div>
			<span>
				{{item.title}}
			</span>
		</template>

	</div>
	<script>
		//以下7个方法, 修改数组, 页面可以跟着改变
		//push
		//pop
		//shift
		//unshift
		//splice
		//sort
		//reverse
		var vm = new Vue({
			el: '#root',
			data: {
				list: [
					{id:'1', title:'hello'},
					{id:'2', title:'dell'},
					{id:'3', title:'lee'},
				]
			}
		})

		//修改数组且页面跟着修改的第二个方法, 就是直接改变引用的值
		// vm.list = [
		// 			{id:'1', title:'hello'},
		// 			{id:'4', title:'dell'},
		// 			{id:'3', title:'lee'},
		// 		]
	</script>

	<hr>

	<!-- 对象循环 -->
	<div id="root1">
		<div v-for="(item,key,index) of userInfo">
			{{item}}--{{key}}--{{index}}
		</div>
	</div>
	<script>
		var vm1 = new Vue({
			el: '#root1',
			data: {
				userInfo:{
					name: 'Dell',
					age: 28,
					gender: 'male',
					salary: 'secret'
				}
			}
		})
	</script>
	<!-- 如果想直接修改且页面跟着改变的话,需要直接修改引用的值,如下
	vm1.userInfo={
					name: 'Dell',
					age: 28,
					gender: 'male',
					salary: 'secret',
					address: '111'
				}
	-->


</body>
</html>