manlili blog

Vue列表渲染

发表于 | 分类于

项目中最常用的是列表的循环，本次写几个测试例子总结一下：
github地址:https://github.com/manlili/vue_learn里面的lesson09

for循环数组

举个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue列表</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <ul class="test">
            <li v-for="item in name"> <!--获取位置第一种写法:$index是vue自带的位置索引-->
                {{$index}}--{{item.message}}        <!--输出0--Foo    1--Bar-->
            </li>
            <li v-for="(index,item) in name">  <!--获取位置第二种写法:自定义一个index变量直接跟着item-->
                {{index}}**{{item.message}}                    <!--输出0**Foo    1**Bar-->
            </li>
        </ul>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                data: {
                    name: [   //注意name是数组
					  { message: 'Foo' },
					  { message: 'Bar' }
					]
                }
            })
        </script>
    </body>
</html>

for循环对象

直接上个例子，注意看注释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue列表</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <ul class="test">
            <li v-for="value in name"> 
                {{$key}}--{{value}}     <!--输出是 FirstName--John LastName--Doe Age--30-->
            </li>
        </ul>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                data: {
                    name:{ //注意name是对象
					  FirstName: 'John',
					  LastName: 'Doe',
					  Age: 30
					}
                }
            })
        </script>
    </body>
</html>

track-by定义不需重新渲染的DOM片段

功能:有时候数组数据变化,页面所有DOM都需要重新渲染,这样会增加渲染时间,但是track-by可以定义哪些DOM被复用,使Vue.js 因而能尽可能地复用已有实例.
下面写个测试例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue列表</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <ul class="test">
            <li v-for="item in name" track-by="id"> <!--然后在替换数组 name 时，如果 Vue.js 遇到一个包含id:'01' 的新对象，vue可以复用这个已有对象的作用域与 DOM 元素。-->
                {{$index}}--{{item.message}}        <!--输出0--Foo    1--Bar-->
            </li>
        </ul>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                data: {
                    name: [   //注意item是数组
					  { message: 'Foo',id:01 },
					  { message: 'Bar',id:02 }
					]
                }
            })
        </script>
    </body>
</html>

请我喝杯果汁吧！