web前端开发个人技术博客
当前位置: JavaScript > [Vue教程]条件渲染、列表渲染、Class与Style绑定

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

2019-01-21 分类:JavaScript 作者:码云 阅读(2815)

本章将分享给大家的是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
        }
})

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

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

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

v-if调试count

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

v-else时小于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语句。

count语句执行

默认的情况下,判断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的语句.

显示判断2语句

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

count走判断3语句

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

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执行结果

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

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

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
<div id="app">
    {{msg}}
    <div v-for="item in list">{{item}}</div>
</div>
1
v-for="item in list"意思是用v-for循环遍历list,item代表list里面单个单个的元素,简单理解一下它的用法。

页面显示效果:

v-for的用法

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

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

v-for循环床架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
<div id="app">
    {{msg}}
    <div v-for="item in list">{{item.name}}</div>
</div>

效果展示:

list渲染对象数组

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

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

1
2
3
4
5
6
7
8
9
10
11
<div id="app">
    {{msg}}
    <div v-for="item in list">
        <div v-if="item.age > 28">
            {{item.name}}
        </div>
        <div v-else>
            {{item.age}}
        </div>
    </div>
</div>

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

条件渲染和列表渲染结合起来使用

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

1
2
3
4
5
6
7
8
<div id="app">
    {{msg}}
    <div v-for="item in list">
        <div v-show="item.age > 28">
            {{item.name}}
        </div>
    </div>
</div>
v-show判断与列表渲染结合使用

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>

页面显示效果:

Class与Style的绑定

当然还可以在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>

我们看一下页面上效果:

class绑定

由上图可以看出,在element中已经渲染出了两个列表元素mybj和小码,只是因为小码的年龄在item.age大于28的判断条件中不成立false,所以小码列表元被隐藏了,只能看到mybj这个元素。

对于class绑定我们还有这样一种写法v-bind:class="['active','add','more']",在element中我们可以看到他只是输出了这三个元素

class其他绑定方法

我们还可以继续添加一个表达式v-bind:class="['active','add','more',{'another':true}]"

class绑定表达式

当然还可以给他加一个判断条件如果age小于29,我们就绑定干这个another

class绑定条件语句

虽然小码这个元素没有显示出来,是因为我们v-show做了一个判断,所以它有这个displa:none;这个属性,但是在这个class绑定属性上面item.age是小于29的,而list数组对象中小码是小于29的,所以显示出来another这个class。

这个地方可能讲的内容少,关于这个class和style我们只是简单介绍它们的使用方式,我会在后面的文章中详细介绍它们的使用方法,结合上面讲的条件渲染、列表渲染、class和style方式,我们可以形成我们想要的各式各样的页面元素。

「如果觉得我的文章对您有用,请帮助本站成长」

赞(4) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
4

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - [Vue教程]条件渲染、列表渲染、Class与Style绑定

博客简介

码云笔记: mybj123.com,一个关注Web前端开发技术的博客,主要记录和总结前端工作中常用的知识及我的生活。
更多博客详情请看关于博客

圈子

关注微信公众号
关注微信公众号

精彩评论

服务热线:
 13888888888

 QQ在线交流