CRainyDay

条件渲染与列表渲染

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="shift">切换</button>-->
<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树.

Vue1-3.1

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">
//在这里,vue本身只监视persons数组的改变,而没有监视数组内部数据的改变
//但是vue重写了一些改变数组内部数据的方法(先调用原来的方法,再进行数据绑定),进而实现数据数组内部数据变化时自动刷新页面
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){
//删除数组中指定index的元素
this.persons.splice(index,1);
},
updateItem(index,newP){
this.persons[index] = newP;//这行代码并没有改变persons本身,只是改变了数组内部的数据.数组内部的数据发生变化,但是没有vue的变异方法,所以不会更新页面
this.persons.splice(index,1,newP);
//splice函数也可以向数组中插入新的元素.用法:splice(index,0,item)
}
}
});
</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,//0->原本顺序,1->升序,2->降序
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 正式引入块级作用域{}.

  1. var: 会发生变量提升. 用var声明的变量, 在其声明之前就可以调用. 其值为: undefined. 属于函数级作用域.
  2. const: 用来定义常量, 声明时必须初始化(即必须赋值), 只能在块作用域里访问, 而且不能修改.
  3. let: 不会发生变量提升. 只能在块作用域里访问, 不能跨块访问, 更不能跨函数访问.

 评论



本博客所有文章除特别声明外,均采用[(CC BY-NC-SA 4.0)]许可协议。转载请注明出处!

本站使用 Material X 作为主题 , 总访问量为 次 。
Copyright © 2019 CRainyDay's Blog 版权所有