Vue.js v-for at list
array
Vue 的循环就是通过 v-for 指令得以实现，通常可以通过循环的方式来渲染一个列表对象。同样 v-for 指令还需使用 item in items 形式的特殊语法进行渲染：
通常 item 是被迭代数组的别名，而 items 则是数组的元数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <ui id="app">
<li v-for="item in items">{{item.message}}</li>
</ui>
<script>
const app = Vue.createApp ({
data() {
return {
items: [
{message: 'This is one'},
{message: 'This is two'}
]
}
}
})
const vm = app.mount('#app')
</script>
|
父作用域属性
在 v-for 指令中，我们所有可以访问的父作用域属还支持可选的第二参数，主要用于索引和加入：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <ui id="app">
<li v-for="(item, index) in items">{{index}}-{{item.message}}——{{message}}}</li>
</ui>
<script>
const app = Vue.createApp ({
data() {
return {
message: 'Hey,v-for',
items: [
{message: 'This is one'},
{message: 'This is two'}
]
}
}
})
const vm = app.mount('#app')
</script>
|
Object
除数组以外，v-for 指令同样支持对象的循环渲染以及父作用域属性的使用：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <ui id="app">
<li v-for="item in items">{{item}}</li>
</ui>
<script>
const app = Vue.createApp ({
data() {
return {
items: {
title: 'Start Vue 3.0',
author: 'lk.sun'
}
}
}
})
const vm = app.mount('#app')
</script>
|
父作用域
需要注意的是父作用域中的第二参数的格式和位置需要按照 value、name、index 的形式进行排序，否则在数据渲染的时候将会出现混乱。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <ui id="app">
<li v-for="(value, name, index) in items">index: {{index}} - name: {{name}} - value: {{value}}</li>
</ui>
<script>
const app = Vue.createApp ({
data() {
return {
items: {
title: 'Start Vue 3.0',
author: 'lk.sun'
}
}
}
})
const vm = app.mount('#app')
</script>
|
维护状态
当 v-for 渲染的元素列表发生改变时，会默认使用 就地更新 测罗，如果数据被改变 vue 将不会移动 DOM 元素来匹配数据项的顺序，为了确保他们每个需渲染后索引位置正确，在节点中加入一个唯一的 key 属性：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <ui id="app">
<li v-for="item in items" :key="item.id">{{item}}</li>
</ui>
<script>
const app = Vue.createApp ({
data() {
return {
items: {
title: 'Start Vue 3.0',
author: 'lk.sun'
}
}
}
})
const vm = app.mount('#app')
</script>
|
在官方文档中建议我们尽可能的时候 v-for 时可以提供 key 属性，除非遍历输出的 DOM 内容非常简单，或是希望可以减少性能上的提升。
数组的更新检测
变更方法
| Id |
Name |
Info |
| 1 |
push() |
增加一个方法 |
| 2 |
pop() |
从下往上突然的删除一个方法 |
| 3 |
shift() |
从上往下删除一个方法 |
| 4 |
unshift() |
从上方新加入一个方法 |
| 5 |
splice() |
splice()方法可用于添加、删除、替换数组内的值 |
| 6 |
sort() |
用于排序方法 |
| 7 |
reverse() |
主要用于排序倒序 |
| 8 |
filter() |
过滤器或筛选 |
| 9 |
slice() |
切片 |
假设我们需要增加一个新的数组，可以通过使用 push() 变更方法在控制台中直接使用 vm.items.push({message: 'A4TECH'}) 进行加入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <ui id="app">
<li v-for="item in items">{{item.message}}</li>
</ui>
<script>
const app = Vue.createApp ({
data() {
return {
items: [
{message: 'LG'}
]
}
}
})
const vm = app.mount('#app')
</script>
|
过滤和排序
filter()
在 Vue 3.0 中，将 filters 属性移除并向变更方法中新增了一个 filter() 方法作为过滤器进行使用，在 Vue 2.x 中，开发者可以使用 filters 来处理通用的文本格式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <template>
<h1>Bank Account Balance</h1>
<p>{{ accountBalance | currencyUSD }}</p>
</template>
<script>
export default {
props: {
accountBalance: {
type: Number,
required: true
}
},
filters: {
currencyUSD(value) {
return '$' + value
}
}
}
</script>
|
在 Vue 3.x 中可以通过使用 fliter() 来处理数组来进行过滤：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <ui id="app">
<li v-for="item in evenNumbers" :key="item">{{item}}</li>
</ui>
<script>
const app = Vue.createApp ({
data() {
return {
numbers: [1, 2, 3, 4, 5, 6]
}
},
computed: {
evenNumbers() {
return this.numbers.filter(number => number % 2 === 0)
}
}
})
const vm = app.mount('#app')
</script>
|
sort()
除了 filter() 可以通过表达式进行过滤，还可以通过 sort 来对数组进行排序:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <ui id="app">
<li v-for="item in evenNumbers" :key="item">{{item}}</li>
</ui>
<script>
const app = Vue.createApp ({
data() {
return {
numbers: [1, 20, 2, 3, 4, 100]
}
},
computed: {
evenNumbers() {
return this.numbers.sort(sortNumbers)
}
}
})
function sortNumbers(a,b){
return a-b;
}
const vm = app.mount('#app')
</script>
|
slice().reverse()
Vue 不仅提供了一个排序的 sort() 方法，还提供了 reverse() 方法来进行逆转，但这需要 slice() 切片后重新进行排序：
1
2
3
4
5
6
7
8
9
10
11
12
13
| <ui id="app">
<li v-for="item in numbers.slice().reverse()" :key="item">{{item}}</li>
</ui>
<script>
const app = Vue.createApp ({
data() {
return {
numbers: [1, 2, 3, 4, 5]
}
}
})
const vm = app.mount('#app')
</script>
|
template at value
template 是一个字符串模板，用于组件的实例标记，木板将会替换所挂载元素的源 HTML，挂在的任何元素所有标记都会被忽略，因此通常可以使用 template 作为指令块进行使用，如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <ui id="app">
<template v-for="item in 10" :key="item">
<li>{{item}}</li>
</template>
</ui>
<script>
const app = Vue.createApp ({
data() {
return {
}
}
})
const vm = app.mount('#app')
</script>
|
这将会被渲染为以下 HTML 表达式：
1
2
3
4
| <ul>
<li>...</li>
...
</ul>
|
