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

Posted 2022-07-21 daqiang123

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js 实战教程 V2.x（10）列表渲染相关的知识，希望对你有一定的参考价值。

技术图片

10列表渲染

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

item.message

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

)

value

</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 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用，如下：

todo

</li>

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

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

todo

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

item.message

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

value

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

item.id item.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>

item.message

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

item

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

a b

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

userProfile.favoriteColor

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

todo.name

</li>

</div>

var vm = new Vue(

el: "#app",

data:

todos:[

]

)

</script>

</body>

</html>

10 列表渲染13.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

todo.name

</li>

</ul>

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

</div>

var vm = new Vue(

el: "#app",

data:

todos:[

]

)

</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交流讨论。

以上是关于Vue.js 实战教程 V2.x（10）列表渲染的主要内容，如果未能解决你的问题，请参考以下文章

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

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

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

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

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

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