梦入琼楼寒有月，行过石树冻无烟

Vue for

2022-04-21


除了vue所提供的v-if指令之外，还提供了另一用于多次渲染元素的模块指令v-for，首先需要提供遍历的元素别名格式为：

1
表达式 is 别名

当然我们也可以使用v-for指令并基于数组来渲染列表，通常items是源数据数组，而item则是被迭代的数组元素别名。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="app">
    <p v-for="item in items" :key="item.message">
        {{ item.message }}
    </p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            items: [
                {message: 'Vue'},
                {message: 'Ajax'},
                {message: 'Ejs'},
            ]
        }
    })
</script>

父作用域属性（第二参数）


在v-for块中还支持访问所有父作用域的属性，v-for并支持第二参数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="app">
    <p v-for="(item, index) in items">
       {{title}} - {{index}} - {{ item.message }}
    </p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            title: 'Hello',
            items: [
                {message: 'Vue'},
                {message: 'Ajax'},
                {message: 'Ejs'},
            ]
        }
    })
</script>

其中index属性对应的则是输出次数，为v-for所支持的第二参数，其格式为：

1
(表达式 , 表达式二) in 别名

遍历对象


除了遍历元素之外，for还可以遍历对象：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
    <p v-for="item in items">
        {{item}}
    </p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            items: {
                name: 'kun',
                age: '10'
            }
        }
    })
</script>

键名:元素


我们可以通过使用vue所提供的另一种方式即键名:元素来循环遍历对象：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
    <p v-for="(value ,name) in items">
        {{name}}:{{value}}
    </p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            items: {
                name: 'kun',
                age: '10'
            }
        }
    })
</script>

维护状态

当v-for渲染元素列表的时候，他会默认使用就地更新的策略，如果数据被改变，vue将不会移动dom元素来匹配数据项的顺序。为了确保他们的每个索引位置正确的渲染。

这个时候我们需要为每个节点写入一个唯一的key属性即：

1
2
3
<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

在官方稳定那个中建议尽可能使用 v-for 时所提供的 key属性，除非遍历输出的DOM内容非常简单，或是希望性能上的提升

数组更新检测

变更方法

ID DA FA
push() 增加一个方法
pop() 从下往上突然的删除一个方法
shift() 从上往下删除一个方法
unshift() 从上方新加入一个方法
splice() splice()方法可用于添加、删除、替换数组内的值
sort() 用于排序方法
reverse() 主要用于排序倒序

sort

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="app">
    <p v-for="item in sortItems">
        {{ item }}
    </p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            items: [1,20,2,3,4,100],
        },
        computed: {
            sortItems:function() {
                return this.items.sort(sortNumber)
            }
        },
    });
    function sortNumber(a,b) {
        return a-b
    }
</script>

reverse()

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="app">
    <p v-for="item in items.slice().reverse()">
       {{ item }}
    </p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            items: [1,2,3,4,5,6],
        }
    })
</script>
⬅️ Go back