06.渲染

goer ... 2022-01-06

Javascript
Vue

大约 1 分钟

渲染

[toc]

# 条件渲染

条件性地渲染一块内容

2.1.0 新增

v-if:惰性的，条件满足渲染

<div id="app">
    <div v-if="type == 'a'">
        a
    </div>
    <div v-else-if="type == 'b'">
        b
    </div>
    <div v-else-if="type == 'c'">
        c
    </div>
    <div v-else> 
        not 
    </div>
</div>
new Vue({
    el:'#app',
        data:{
        type:'a',
    }
});
//v-if  v-else-if   v-else

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

v-show 的元素始终会被渲染并保留在 DOM

只是切换元素的 CSS property display。

// v-show 只是display：none
<div v-show="yes">hello</div>
data:{
	yes:true,
}
// yes  默认值是  false

1
2
3
4
5
6

v-if是惰性的，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

# 列表渲染

v-for 指令基于一个数组来渲染一个列表

循环数组：v-for="item,index in items"

<li v-for="item,index in items" :key="index">{{index}} --- {{item.msg}}</li>
//获取到键值，   item,index
new Vue({
el:'#app',
    data:{
    items:[  
        {msg:'vue'},
        {msg:'reant'}
        ]
 	}
});

// :key="index" 加key属性 指向 唯一索引 提升性能

1
2
3
4
5
6
7
8
9
10
11
12
13

循环对象：v-for="obj,key in objs"

<ul v-for="obj,key in objs">
    <li>{{key}}</li>
    <li>{{obj.id}}</li>
    <li>{{obj.name}}</li>
    <li>{{obj.age}}</li>
</ul>
//循环对象   boj,key  键值对
objs:[
{'id':1,'name':'aaa','age':10},
{'id':2,'name':'bbb','age':10},
{'id':3,'name':'ccc','age':10},
{'id':4,'name':'ddd','age':10},
]

1
2
3
4
5
6
7
8
9
10
11
12
13

建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

// 循环对象
<ul v-for="s,key in sex" :key="key">
    <li>{{key}} ----  {{s}}</li>
</ul>
sex:{
    'id':'hong',
     'createtime':'123213',
     'bbbb':'jjsdfafs',
}

1
2
3
4
5
6
7
8
9

06.渲染

# 条件渲染

# 列表渲染

详情