条件渲染与列表渲染
const、var、let 的区别
1.条件渲染
条件渲染指令:
v-if、v-else、v-show
v-if与v-show的比较: 如果需要频繁的切换用 v-show 更好, 下面将告诉你为什么.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <body>
<div id="demo">
<p v-if="ok">成功</p>
<p v-else>失败</p>
<button @click="ok=!ok">切换</button>
<p v-show="ok">表白成功</p>
<p v-show="!ok">表白失败</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el:'#demo',
data:{
ok:false,
},
methods:{
shift(){
this.ok = ! this.ok;
}
}
});
</script>
</body>
|
先看一下下图, v-show 只是暂时的在页面中隐藏HTML元素, 而 v-if 是操作DOM. 如果频繁的切换, v-if要频繁的修改网页的DOM树.
2.列表渲染
两种渲染: v-for遍历数组、v-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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| <body>
<div id="demo">
<h2>v-for遍历数组</h2>
<ul>
<li v-for="(p,index) in persons" :key="index">
{{index}}---{{p.name}}---{{p.age}}
---<button @click="deleteItem(index)">删除</button>
---<button @click="updateItem(index,{name:'Test',age:18})">更新</button>
</li>
</ul>
<h2>v-for遍历对象</h2>
<ul>
<li v-for="(value,key) in person" :key="key">
{{value}}---{{key}}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el:"#demo",
data:{
persons:[
{name:'Ajax',age:20},
{name:'Bob',age:18},
{name:'Jane',age:22},
{name:'Stein',age:21}
],
person:{name:'Bob',age:20,email:'3013142340@qq.com',phone:'18888888888'}
},
methods:{
deleteItem(index){
this.persons.splice(index,1);
},
updateItem(index,newP){
this.persons[index] = newP;
this.persons.splice(index,1,newP);
}
}
});
</script>
</body>
|
vue中变异的数组函数, splice: ①向数组中添加一个元素, array.splice(index,0,item) ②删除数组的一个元素, array.splice(index,1) ③替换数组中的一个元素, array.splice(index,1,item)
为了实现当数组内部数据变化时, 自动刷新页面, vue重写了一些改变数组内部数据的变异方法(先调用原来的方法,再进行数据绑定).
3.列表的搜索与排序
列表搜索即对显示数据的条件过滤, 按照指定条件选取出符合的数据并显示.
利用数组的 filter 方法过滤数组元素.
用到了 vue 的计算属性, 当计算属性中的相关变量的值发生变化时, 该计算属性便会重新被计算.
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
| <body>
<div id="demo">
<input type="text" v-model="filterName"/>
<ul>
<li v-for="(p,index) in filterPersons" :key="index">
{{index}}---{{p.name}}---{{p.age}}
</li>
</ul>
<button @click="setOrderType(1)">年龄升序</button>
<button @click="setOrderType(2)">年龄降序</button>
<button @click="setOrderType(0)">原本顺序</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#demo',
data:{
filterName:'',
orderType:0,
persons:[
{name:'Ajax',age:20},
{name:'Bob',age:18},
{name:'Jane',age:22},
{name:'Stein',age:21}
]
},
methods:{
setOrderType(orderType){
this.orderType = orderType
}
},
computed:{
filterPersons(){
const {filterName,persons,orderType} = this
let newPersons
newPersons = persons.filter(p=>p.name.indexOf(filterName)!==-1)
if(orderType!==0){
newPersons.sort(function (p1,p2) {
if(orderType===1){
return p1.age-p2.age
}else{
return p2.age-p1.age
}
})
}
return newPersons
}
}
})
</script>
</body>
|
const、let、var的区别. 首先, 要知道作用域, ES5 中作用域有: 全局作用域和函数作用域, 没有块作用域的概念. ES6 正式引入块级作用域{}.
- var: 会发生变量提升. 用var声明的变量, 在其声明之前就可以调用. 其值为: undefined. 属于函数级作用域.
- const: 用来定义常量, 声明时必须初始化(即必须赋值), 只能在块作用域里访问, 而且不能修改.
- let: 不会发生变量提升. 只能在块作用域里访问, 不能跨块访问, 更不能跨函数访问.
