[Vue教程]条件渲染、列表渲染、Class与Style绑定

2019-01-21 分类：JavaScript 作者：码云阅读（3133）

本文共计4343个字，预计阅读时长需要11分钟。

本章将分享给大家的是vue教程中有关条件渲染、列表渲染、class与style的绑定知识。

什么是条件渲染？在我们的页面中会有很多这样的应用场景，比如说我们今天要上架一个活动，这个活动页面只在今天有效，在晚上的24点或者说在明天早上凌晨0点1秒的时候就要把这个页面下下来，把这个图片隐藏掉。如果我们安排一个运维兄弟手动去改HTML，那么运维兄弟就会疯掉的，其实这里就会有一个很简单的办法，就是条件的渲染，即当0点的时候我们去判断这个条件，如果这个条件达到了比如说24点或者是0点一个时间点，之后就把它隐藏起来，这个就是一个条件的渲染。

什么是列表渲染呢？这个就是最常见的，比如说在页面上有很多个元素，很多的图片，像新闻网站一次加载20条，如果用手敲去写HTML，那样新闻网站的人就不用去干活了，每天就去敲HTML代码了，这里面就会有类似于我们C语言代码里面的for循环那样，有一个循环语句在这个地方，让我们把这个页面的元素构建出来生成出来，这就是列表渲染。

Vue就为我们提供了有关条件渲染、列表渲染很简洁的语法，区形成我们页面上的dome元素。

条件渲染

我们先看一下vue常用的条件渲染指令：v-if，是不是和我们的if..else很像，其实就是这个意思，v-else，v-else-if，还有一个指令v-show。

例子：用v-if条件渲染，如果count大于0，我们就输出count的值，v-else其他的输出count的值。

1
2
3
4
5
6
7
8
9

<div id="app">
<div v-if="count > 0">
count大于0，count的值是：{{count}}
</div>
<div v-slse>
count的值是：{{count}}
</div>
{{msg}}
</div>

count使我们新建的一个变量，我们在js写一下，count:0，v-if的count > 0就是false，所以v-else就会输出count为0。

1
2
3
4
5
6
7

var app = new Vue({
el: '#app',
data: {
msg: 'Hello Vue!',
count: 0
}
})

看看是不是我们想要的效果：

接下来我们在控制改变count值，app.count ++，每次执行count++的时候页面都是在变化的，我们条件是count大于0的，是true，输出的只就是多少。

如果我们把count的值改成-1处出现什么情况呢？回车后，大家会看到它就会执行v-else的div，而v-if的count大于0，显然这里的-1是小于0的，所以它会显示count的的值。

然后我们用一下v-else-if来判断一下，如果count小于0并且是大于-5的值是count，之后在接入一个div，它的判断条件是v-else，代码修改：

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

<div id="app">
<div v-if="count > 0">
判断1：count大于0，count的值是：{{count}}
</div>
<div v-else-if="count < 0 && count > -5">
判断2：count的值是：{{count}}
</div>
<div v-else>
判断3：count的值是：{{count}}
</div>
{{msg}}
</div>

上面代码的意思是当count大于0的时候，执行判断1的语句；当count小于0并且大于-5时，执行判断2语句；其他执行判断3语句。

默认的情况下，判断1，count大于0位false；判断2，count小于0时为false并且count大于-5时为true，与的判断一旦有一个为false的话整个判断都是false。判断1和判断都是false，所以它就会输出判断3的话。

同样我们来改变一下count的值，我们让count等于-1的时候，对于判断1，count大于0就是false，所以就会走到判断2语句，-1小于0并且大于-5位true，所以在页面上显示判断2的语句.

如果count等于-6，它就会走到判断3里面：

大家会想如果把判断1的条件改成count小于0，它会输出那段话呢？我们看一下：

从上图可以看出，它是一个一个做的判断，当判断1和判断2同时满足条件是，只会加载判断1语句，不回去执行第二个判断，这个也是我们在写条件语句需要注意的地方。

那么v-show其实后面跟的也是javascript表达式，如下代码：

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

<div id="app">
<div v-if="count < 0">
判断1：count大于0，count的值是：{{count}}
</div>
<div v-else-if="count < 0 && count > -5">
判断2：count的值是：{{count}}
</div>
<div v-else>
判断3：count的值是：{{count}}
</div>
<duv v-show="count == -1">
show:{{count}}
</duv>
{{msg}}
</div>

运行结果如下：

由上图可以看到v-show加载结果失效了，因为count初始值是0，v-show语句条件是count等于-1，0不等于-1，所以失效。

我们在控制台修改一下count的值，我们让count等于-1，这时v-show就展示出来了：

后面我会介绍v-show和v-if它们的区别，或者说是它们之间实用的场景，不同的地方。

列表渲染

列表渲染常用的指令：v-for，表示循环输出，后面我们会讲到v-for与v-if如何结合使用，以及v-for的高阶用法。

javascript代码这样写，我们在data中新添加list数组：

1
2
3
4
5
6
7

var app = new Vue({
el:'#app',
data: {
msg: 'Hello Vue!',
list: [1,2,3,4,5]
}
})

用v-for循环list数组：

1
2
3
4

1	v-for="item in list"意思是用v-for循环遍历list，item代表list里面单个单个的元素，简单理解一下它的用法。

页面显示效果：

这样页面上就循环的输出了list数组内元素1、2、3、4、5。

我们在看一下element，在element中我们可以看到，相当于是给我们循环创建了5个div，如下：

当然，我们还可以在在list渲染对象数组：

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

var app = new Vue({
el:'#app',
data: {
msg: 'Hello Vue!',
list: [{
name: 'mybj',
age: 2019
},{
name: '小码',
age:28
}]
}
})

如果我们想在页面渲染渲染名字name，可以用item.name渲染这样写：

1
2
3
4

效果展示：

接下来我们用上面刚刚介绍的条件渲染和列表渲染结合起来使用一下，看看它们会擦出什么样的火花。

例子：用v-if判断当我们年龄大于28的时候，显示它的名字，其他显示年龄。

1
2
3
4
5
6
7
8
9
10
11

现在我们有两个测试数据，我们可以预想一下结果，在list数组中mybj年龄是大于28，在页面上会输出mybj这个名字，而小码这个年龄是28，与我们的判断条件28相等所以为false，页面上渲染出来的就是小码这个年龄28，我们看一下效果：

和我们预想的效果一样，上面呢就是条件渲染和列表渲染结合起来使用的，当然我们还可以用v-show来判断，如果它的年龄大于28就显示出来它的名字：

1
2
3
4
5
6
7
8

Class与Style的绑定

在之前我们说v-bind做一些属性绑定的，我们现在用v-bind绑定style，在没有用v-bind时我们是这样写style样式的，在div中直接写style="color:red;"，而现在我们vue有了v-bind，就可以这样写v-bind:style="{'color':'red'}"，它们有什么区别呢？即用v-bind绑定style属性，我们需要给style内容加上大括号“{}”，里面的属性用单引号把它引起来。绑定class的方式我在之前的一篇《Vue绑定class的几种方式》一文具体总结过，大家可以看一下。

1	v-bind:style="{'color':'red'}"

{'color':'red'}其实就是个对象，我们其实可以在vue实例的data给它一个styleMsg对象，然后在v-bind:style绑定

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

<div id="app">
{{msg}}
<div v-for="item in list">
<div v-show="item.age > 28" v-bind:style="styleMsg">
{{item.name}}
</div>
</div>
</div>
<script>
var app = new Vue({
el:'#app',
data: {
msg: 'Hello Vue!',
styleMsg: {
color: 'red'
},
list: [{
name: 'mybj',
age: 2019
},{
name: '小码',
age:28
}]
}
})
</script>

页面显示效果：

当然还可以在styleMsg加更多你喜欢的样式，但是如果样式属性中间有单航线的话，比如 text-shadow 要改成驼峰写法textShadow。

1
2
3
4

styleMsg: {
color: 'red',
textShadow: '0 0 5px green'
}

接下来看一下class绑定是什么样子的呢，我们也用v-bind去绑定class，v-bind:class={'active':true}，花括号里面的内容是javascript表达式，第一个引号里代表的就是我们实际class名字，后面true是判断式。

1
2
3
4
5
6
7
8
9
10

<div id="app">
{{msg}}
<div v-for="item in list">
<div v-show="item.age > 28"
v-bind:class="{'active':true}"
v-bind:style="styleMsg">
{{item.name}}
</div>
</div>
</div>

我们看一下页面上效果：