Vue.js学习笔记5.列表渲染

<!DOCTYPE html>
<html>
<head>
<title>page2</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<script src="http://bj.xdf.cn/huodong/js/jquery-1.12.3.min.js"></script>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
	<div id="example">
		<ul id="example-1">
		  <li v-for="item in items">
			{{ item.message }}
		  </li>
		</ul>
		<ul id="example-2">
		  <li v-for="(item, index) in items">
			{{ parentMessage }} - {{ index }} - {{ item.message }}
		  </li>
		</ul>
		<ul id="v-for-object" class="demo">
		  <li v-for="value in object">
			{{ value }}
		  </li>
		  <div v-for="(value, key) in object">
		    {{ key }}: {{ value }}
		  </div>
		  <div v-for="(value, key, index) in object">
		    {{ index }}. {{ key }}: {{ value }}
		  </div>
		</ul>
		<ul id="example-4">
			<li v-for="todo in todos" v-if="!todo.isComplete">
			  {{ todo }}
			</li>
		</ul>
		<ul id="example-5" v-if="todos.length">
		  <li v-for="todo in todos">
			{{ todo }}
		  </li>
		</ul>
	</div>
	<script>
		var example1 = new Vue({
		  el: '#example-1',
		  data: {
			items: [
			  { message: 'Foo' },
			  { message: 'Bar' }
			]
		  }
		})
		var example2 = new Vue({
		  el: '#example-2',
		  data: {
			parentMessage: 'Parent',
			items: [
			  { message: 'Foo' },
			  { message: 'Bar' }
			]
		  }
		})
		
		var example3 = new Vue({
		  el: '#v-for-object',
		  data: {
			object: {
			  firstName: 'John',
			  lastName: 'Doe',
			  age: 30
			}
		  }
		})
		
		var example4 = new Vue({
			el: '#example-4',
			data: {
				todos: [
					{isComplete: true, name: 'aaa'},
					{isComplete: false, name: 'bbb'},
					{isComplete: true, name: 'ccc'}
				]
			}
		})
		
		var example5 = new Vue({
			el: '#example-5',
			data: {
				todos: [
					{isComplete: true, name: 'aaa'},
					{isComplete: false, name: 'bbb'},
					{isComplete: true, name: 'ccc'}
				]
			}
		})
		/*
		Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

			push()
			pop()
			shift()
			unshift()
			splice()
			sort()
			reverse()
		example1.items.push({ message: 'Baz' })
		*/
		/*
		example1.items = example1.items.filter(function (item) {
		  return item.message.match(/Foo/)
		})
		*/
	</script>
</body>
</html>
Vue.js学习笔记5.列表渲染

猜你喜欢
