6 列表渲染

最新推荐文章于 2024-06-07 07:15:22 发布

void1024

最新推荐文章于 2024-06-07 07:15:22 发布

阅读量199

点赞数

分类专栏： Vue记录

本文链接：https://blog.youkuaiyun.com/diOSyu/article/details/107508441

版权

Vue记录专栏收录该内容

6 篇文章

订阅专栏

1 部分1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>列表渲染</title>
		<script type="text/javascript" src="js/vue.min.js"></script>
	</head>
	<body>
		<div id="app-1">
			<ol>
				<li v-for="item in items" v-bind:key="item.message">{{ item.message }}</li>
			</ol>
		</div>
		<div id="app-2">
			<ul>
				<li v-for="(item, index) in items">
					{{ parentMessage }} - {{ index }} - {{ item.message }}
				</li>
			</ul>
		</div>
		<div id="app-3">
			<ul>
				<li v-for="val in stu0Info">{{ val }}</li>
			</ul>
			<ul>
				<li v-for="(val, key) in stu0Info">{{ key }} : {{ val }}</li>
			</ul>
			<ul>
				<li v-for="(val, key, index) in stu0Info">{{ index }} - {{ key }} : {{ val }}</li>
			</ul>			
		</div>
		<script>
			var app1 = new Vue({
				el: '#app-1',
				data: {
					items: [{
							message: 'Foo'
						},
						{
							message: 'Bar'
						}
					]
				}
			});
			var app2 = new Vue({
				el: '#app-2',
				data: {
					parentMessage: 'Parent',
					items: [{
							message: 'Foo'
						},
						{
							message: 'Bar'
						}
					]
				}
			});
			var app3 = new Vue({
				el: '#app-3',
				data: {
					stu0Info: {
						name: 'Mike',
						age: 10,
						sex: 'man'
					}
				}
			});
		</script>
	</body>
</html>

2 部分2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>列表渲染</title>
		<script type="text/javascript" src="js/vue.min.js"></script>
	</head>
	<body>
		<div id='app-1'>
			<ol>
				<li v-for="item in items" v-bind:key="item.msg">{{ item.msg }}</li>
			</ol>
		</div>
		<div id="app-2">
			<h4>显示过滤/排序后的结果</h4>
			<ul>
				<li v-for="num in evenNumbers">{{ num }}</li>
			</ul>
			<ul v-for="set in sets">
				<li v-for="n in even(set)">{{ n }}</li>
			</ul>
			<ul>
				<li v-for="n in 10">{{ n }} </li>
			</ul>
		</div>
		<div id="app-3">
			<ul>
				<template v-for="item in items">
					<li>{{ item.msg }}</li>
					<li>-----------------</li>
				</template>
			</ul>
		</div>
		<div id="app-4">
			<ul>
				<li v-for="todo in todos" v-if="!todo.isComplete">
					{{ todo.info }}
				</li>
			</ul>
			<ul v-if="todos.length">
				<li v-for="todo in todos">
					{{ todo.info }}
				</li>
			</ul>
			<p v-else>No todos left!</p>
		</div>
		<script type="text/javascript">
			var app1 = new Vue({
				el: '#app-1',
				data: {
					items: [{
							msg: 'Foo'
						},
						{
							msg: 'Bar'
						}
					]
				}
			});
			// filter
			// app1.items = app1.items.filter(function(item){
			// 	return item.msg.match(/Foo/);
			// });

			// push
			// app1.items.push({
			// 	msg: 'Baz'
			// });

			var app2 = new Vue({
				el: '#app-2',
				data: {
					numbers: [1, 2, 3, 4, 5, 6],
					sets: [
						[1, 2, 3, 4, 5],
						[6, 7, 8, 9, 10]
					]
				},
				computed: {
					evenNumbers: function() {
						return this.numbers.filter(function(number) {
							return number % 2 === 0;
						});
					}
				},
				methods: {
					even: function(numbers) {
						return numbers.filter(function(number) {
							return number % 2 === 0
						})
					}
				}
			});

			var app3 = new Vue({
				el: '#app-3',
				data: {
					items: [{
							msg: '@Foo'
						},
						{
							msg: '@Bar'
						}
					]
				}
			});

			var app4 = new Vue({
				el: '#app-4',
				data: {
					todos: [{
							isComplete: false,
							info: 'Are you ok?'
						},
						{
							isComplete: true,
							info: 'Yes'
						}
					]
				}
			});
		</script>
	</body>
</html>

3 部分3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>列表渲染</title>
		<script type="text/javascript" src="js/vue.min.js"></script>
	</head>
	<body>
		<div id="todo-list-example">
			<form v-on:submit.prevent="addNewTodo">
				<label for="new-todo">Add a todo</label>
				<input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat">
				<button>Add</button>
			</form>
			<ul>
				<li is="todo-item" v-for="(todo, index) in todos" v-bind:key="todo.id" v-bind:title="todo.title" v-on:remove="todos.splice(index, 1)"></li>
			</ul>
		</div>
		<script>
			Vue.component('todo-item', {
				template: '\
			    <li>\
			      {{ title }}\
			      <button v-on:click="$emit(\'remove\')">Remove</button>\
			    </li>\
			  ',
				props: ['title']
			})

			var app1 = new Vue({
				el: '#todo-list-example',
				data: {
					newTodoText: '',
					todos: [{
							id: 1,
							title: 'Do the dishes',
						},
						{
							id: 2,
							title: 'Take out the trash',
						},
						{
							id: 3,
							title: 'Mow the lawn'
						}
					],
					nextTodoId: 4
				},
				methods: {
					addNewTodo: function() {
						this.todos.push({
							id: this.nextTodoId++,
							title: this.newTodoText
						})
						this.newTodoText = ''
					}
				}
			});
		</script>
	</body>
</html>