Vue.js 实战教程 V2.x（10）列表渲染 / 憋错料

10列表渲染

10.1用 v-for 把数组对应为元素

</li>

</ul>

var example1 = new Vue({

el: ‘#example-1‘,

data: {

items: [

{ message: ‘Foo‘ },

{ message: ‘Bar‘ }

]

}

})

访问父作用域的属性和当前项的索引。

{{ parentMessage }} - {{ index }} - {{ item.message }}

</li>

</ul>

var example2 = new Vue({

el: ‘#example-2‘,

data: {

parentMessage: ‘Parent‘,

items: [

{ message: ‘Foo‘ },

{ message: ‘Bar‘ }

]

}

})

10.2在 v-for 里使用对象

new Vue({

el: ‘#v-for-object‘,

data: {

object: {

title: ‘How to do lists in Vue‘,

author: ‘Jane Doe‘,

publishedAt: ‘2016-04-10‘

}

})

</li>

</ul>

第二个的参数作为键名：

{{ name }}: {{ value }}

</div>

第三个参数作为索引：

{{ index }}. {{ name }}: {{ value }}

</div>

10.3维护状态

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性：

</div>

10.4数组更新检测

变异方法 (mutation method)

Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

你可以打开控制台，然后对前面例子的 items 数组尝试调用变异方法。比如 example1.items.push({ message: ‘Baz‘ })。

替换数组

example1.items = example1.items.filter(function (item) {

return item.message.match(/Foo/)

})

10.5对象变更检测注意事项

还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

var vm = new Vue({

data: {

a: 1

}

})// `vm.a` 现在是响应式的

vm.b = 2// `vm.b` 不是响应式的

对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。例如，对于：

var vm = new Vue({

data: {

userProfile: {

}

})

你可以添加一个新的 age 属性到嵌套的 userProfile 对象：

Vue.set(vm.userProfile, ‘age‘, 27)

你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：

vm.$set(vm.userProfile, ‘age‘, 27)

有时你可能需要为已有对象赋值多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：

Object.assign(vm.userProfile, {

age: 27,

favoriteColor: ‘Vue Green‘

})

你应该这样做：

vm.userProfile = Object.assign({}, vm.userProfile, {

age: 27,

favoriteColor: ‘Vue Green‘

})

10.6显示过滤/排序后的结果

有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际改变或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。

例如：

data: {

numbers: [ 1, 2, 3, 4, 5 ]

},computed: {

evenNumbers: function () {

return this.numbers.filter(function (number) {

return number % 2 === 0

})

}

在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个方法：

data: {

numbers: [ 1, 2, 3, 4, 5 ]

},methods: {

even: function (numbers) {

return numbers.filter(function (number) {

return number % 2 === 0

})

}

10.7在 v-for 里使用值范围

v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。

<div>

</div>

10.8在 <template> 上使用 v-for

类似于 v-if，你也可以利用带有 v-for 的 <template> 来循环渲染一段包含多个元素的内容。比如：

<ul>

</template>

</ul>

10.9 v-for 与 v-if 一同使用

注意我们不推荐在同一元素上使用 v-if 和 v-for。

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用，如下：

</li>

上面的代码将只渲染未完成的 todo。

而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 <template>)上。如：

</li>

</ul>

<p v-else>No todos left!</p>

10.10在组件上使用 v-for

在自定义组件上，你可以像在任何普通元素上一样使用 v-for 。

<my-component v-for="item in items" :key="item.id"></my-component>

然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 prop：

<my-component

v-for="(item, index) in items"

v-bind:item="item"

v-bind:index="index"

v-bind:key="item.id">

</my-component>

不自动将 item 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。

下面是一个简单的 todo 列表的完整例子：

<input

v-model="newTodoText"

id="new-todo"

placeholder="E.g. Feed the cat"

</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>

Vue.component(‘todo-item‘, {

<li>\

{{ title }}\

<button v-on:click="$emit(\‘remove\‘)">Remove</button>\

</li>\

‘,

props: [‘title‘]

})

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 = ‘‘

}

})

完整代码：

10 列表渲染1.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</li>

</ul>

{{ parentMessage }} - {{ index }} - {{ item.message }}

</li>

</ul>

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‘ }

]

}

})

</script>

</body>

</html>

10 列表渲染2.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</li>

<br>

{{ name }}: {{ value }}

</div>

<br>

{{ index }}. {{ name }}: {{ value }}

</div>

</ul>

new Vue({

el: ‘#v-for-object‘,

data: {

object: {

title: ‘How to do lists in Vue‘,

author: ‘Jane Doe‘,

publishedAt: ‘2016-04-10‘

}

})

</script>

</body>

</html>

10 列表渲染3.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

id:<input type="text" v-model="id">

name:<input type="text" v-model="name">

</p>

</div>

var vm = new Vue({

el: "#app",

data: {

id:"",

name:"",

items:[

{id:1, name:"zhangsan"},

{id:2, name:"lisi"}

]

methods: {

add(){

this.items.unshift({id:this.id, name:this.name})

}

})

</script>

</body>

</html>

10 列表渲染4.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</p>

<button @click="filter">filter</button>

</div>

var vm = new Vue({

el: "#app",

data: {

items:[

{message:"Foo"},

{message:"Bar"}

]

methods: {

filter(){

this.items = this.items.filter(function (item) {

return item.message.match(/Foo/)

})

}

})

</script>

</body>

</html>

10 列表渲染5.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</p>

</div>

var vm = new Vue({

el: "#app",

data: {

items: [‘a‘, ‘b‘, ‘c‘]

}

})

// vm.items[1] = ‘x‘ // 不是响应性的

// vm.items.length = 2 // 不是响应性的

// Vue.set

// Vue.set(vm.items, 1, ‘x‘)

// Array.prototype.splice

// vm.items.splice(1, 1, ‘x2‘)

// vm.$set(vm.items, 1, ‘x3‘)

vm.items.splice(3)

</script>

</body>

</html>

10 列表渲染6.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

var vm = new Vue({

el: "#app",

data: {

a: 1,

b: ‘‘

}

})// `vm.a` 现在是响应式的

vm.b = 2// `vm.b` 不是响应式的

</script>

</body>

</html>

10 列表渲染7.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

{{userProfile.name}}<br>

{{userProfile.age}}<br>

</div>

var vm = new Vue({

el: "#app",

data: {

userProfile: {

}

})

// Vue.set(vm.userProfile, ‘age‘, 18)

// vm.$set(vm.userProfile, ‘age‘, 18)

vm.userProfile = Object.assign({}, vm.userProfile, {

age: 18,

favoriteColor: ‘Green‘

})

</script>

</body>

</html>

10 列表渲染8.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

var vm = new Vue({

el: "#app",

data: {

numbers: [ 1, 2, 3, 4, 5 ]

computed: {

evenNumbers: function () {

return this.numbers.filter(function (number) {

return number % 2 === 0

})

}

})

</script>

</body>

</html>

10 列表渲染9.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

var vm = new Vue({

el: "#app",

data: {

numbers: [ 1, 2, 3, 4, 5 ]

methods: {

even: function (numbers) {

return numbers.filter(function (number) {

return number % 2 === 0

})

}

})

</script>

</body>

</html>

10 列表渲染10.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

var vm = new Vue({

el: "#app"

})

</script>

</body>

</html>

10 列表渲染11.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ul>

</template>

</ul>

</div>

var vm = new Vue({

el: "#app",

data: {

items:[

{msg:"Hello"},

{msg:"World"}

]

}

})

</script>

</body>

</html>

10 列表渲染12.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</li>

</div>

var vm = new Vue({

el: "#app",

data: {

todos:[

{name: ‘张三‘, isComplete:false},

{name: ‘李四‘, isComplete:false}

]

}

})

</script>

</body>

</html>

10 列表渲染13.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</li>

</ul>

<p v-else>No todos left!</p>

</div>

var vm = new Vue({

el: "#app",

data: {

todos:[

{name: ‘张三‘},

{name: ‘李四‘}

]

}

})

</script>

</body>

</html>

10 列表渲染14.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<input

v-model="newTodoText"

id="new-todo"

placeholder="E.g. Feed the cat"

</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>

Vue.component(‘todo-item‘, {

<li>\

{{ title }}\

<button v-on:click="$emit(\‘remove\‘)">Remove</button>\

</li>\

‘,

props: [‘title‘]

})

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>

欢迎观看视频教程：https://ke.qq.com/course/432961?tuin=36914f34，如有疑问，请加QQ群665714453交流讨论。

原文地址：https://www.cnblogs.com/daqiang123/p/11368415.html

时间： 2024-11-01 14:51:21

Vue.js 实战教程 V2.x（10）列表渲染

Vue.js 实战教程 V2.x（10）列表渲染的相关文章

热烈庆祝《Vue.js 实战教程 V2.x（一）基础篇》上线了！

Vue.js 实战教程 V2.x（13）事件处理

Vue.js 实战教程 V2.x（8）Class与Style绑定

Vue.js 实战教程 V2.x（3）第一个Vue.js程序

Vue.js 实战教程 V2.x（12）表单输入绑定

Vue.js 实战教程 V2.x（7）计算属性和侦听器

Vue.js 实战教程 V2.x（2）Vue.js简介

Vue.js 实战教程 V2.x（6）模板语法

Vue.js 实战教程 V2.x（1）前端发展史