Vue.js入门与商城开发实战
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

4.1　v-if指令

看到v-if你肯定会想到JavaScript中的if else条件判断语句，进而你会想是不是还有v-else指令。没错，Vue不仅给我们提供了v-else指令，还提供了v-else-if指令。

既然这样，我们就很好理解v-if指令了，就是根据表达式的值是真（true）还是假（false）来重建或者销毁一个我们绑定的DOM元素。

4.1.1　使用v-if指令

本节介绍使用v-if指令进行条件判断。下面的示例中，v-if指令将根据表达式xianshi的值（true或false）来决定是否插入p元素。具体步骤如下：

1）在Vue.js的data区域定义布尔型变量xianshi（值为true）、布尔型变量buxianshi（值为false）、布尔型变量ok（值为true）。

2）v-if和变量xianshi的使用：

<p v-if="xianshi">这里的内容会显示出来</p>

3）v-if和变量buxianshi的使用：

<p v-if="buxianshi">这里的内容会不会显示出来，在浏览器中看不到</p>

4）v-if和变量ok的使用：

<template v-if="ok">
    <h1>Vue入门到精通</h1>
    <p>黄菊华老师主讲！</p>
</template>

完整示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>条件判断语句 v-if 指令</title>
    <!--加载本地vue.js的框架-->
    <script src="vue2.2.2.min.js"></script>
</head>
<body>
    <!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
    <div id="app">

    <!--属性xianshi的值为true，则下面段落内容会显示在浏览器-->
          <p v-if="xianshi">这里的内容会显示出来</p>

    <!--属性buxianshi的值为false，则下面段落内容不会显示在浏览器-->
    <p v-if="buxianshi">这里的内容不会显示出来，在浏览器中看不到</p>

    <!--属性ok的值为true，则下面模板内容会显示在浏览器中-->
          <template v-if="ok">
              <h1>Vue入门到精通</h1>
              <p>黄菊华老师主讲！</p>
          </template>      
    </div>
    
    <script>
    //下面是Vue.js的代码块-开始
    new Vue({
        el: '#app',//app为前面div代码块的id的值，通过“#”绑定
        //data区域定义属性的值
        data: {
             xianshi: true,//定义布尔型的值
             buxianshi:false,//定义布尔型的值
             ok: true
             //后面没有数据，则这里定义完毕后面不需要跟上逗号"，"
        }
    })//Vue.js的代码块-结束
    </script>    
</body>
</html>

效果如图4-1所示。

图4-1　v-if指令

4.1.2　使用v-else指令

可以用v-else指令给v-if添加一个else块。

下面我们做一个示例：随机生成一个数字，判断是否大于0.5，然后输出对应信息。具体步骤如下：

1）在data代码块中定义一个变量shuzhi=1。

2）在html视图部分，结合随机函数Math.random（）与数字0.5进行大小对比。

完整示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>条件判断语句v-else 指令</title>
    <!--加载本地vue.js的框架-->
    <script src="vue2.2.2.min.js"></script>
</head>
<body>
    <!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
    <div id="app">
        
        <!--if指令后面为true执行的代码块-开始-->
        <div v-if="Math.random() > 0.5">
            随机数 大于 0.5
        </div>
        <!--if指令后面为true执行的代码块-结束-->

        <!--if指令后面为false执行的代码块-开始-->
        <div v-else>
            随机数 小于 0.5
        </div>
        <!--if指令后面为false执行的代码块-结束-->
        
        <hr>
        <div v-if="shuzhi > 3">数字 大于 3</div>
        <div v-else>数字 小于 3</div>
        
    </div>
    
    <script>
    //下面是Vue.js的代码块-开始
    new Vue({
        el: '#app',//app为前面div代码块的id的值，通过“#”绑定
        data:{
            shuzhi:1 //定义一个数字属性
            //后面没有数据，则这里定义完毕后面不需要跟上逗号“，”
        }  
    })//Vue.js的代码块-结束
    </script>    
</body>
</html>

效果如图4-2所示。

图4-2　v-else指令

4.1.3　使用v-else-if指令

v-else-if是2.1.0版新增的指令，顾名思义，用作v-if的else-if块。可以链式地多次使用。

下面我们做一个示例：在data代码块中定义一个字符变量type（值为G），在html视图中通过v-if、v-else-if、v-else来判断和显示对应的内容。

完整示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>条件判断语句v-else-if 指令</title>
    <!--加载本地vue.js的框架-->
    <script src="vue2.2.2.min.js"></script>
</head>
<body>
    <!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
    <div id="app">

        <!--下面为if指令后面为true时执行的代码块-开始-->
        <div v-if="type==='A'">A</div>

        <!--下面为else-if指令为true时执行的代码块-->
        <div v-else-if="type==='B'">B</div>

        <!--下面为else-if指令为true时执行的代码块-->
        <div v-else-if="type==='C'">C</div>

        <!--下面为（else指令）上面条件都不满足执行的代码块-->
        <div v-else>不是字母ABC</div>
    </div>
    
    <script>
    //下面是Vue.js的代码块-开始
    new Vue({
        el: '#app',//app为前面div代码块的id的值，通过“#”绑定
        data:{
            type:'G' //定义一个字符
            //后面没有数据，则这里定义完毕，后面不需要跟上逗号“，”
        }          
    })//Vue.js的代码块-结束
    </script>    
</body>
</html>

提示　v-else、v-else-if必须跟在v-if或者v-else-if之后。

效果如图4-3所示。

图4-3　v-else-if指令

本周热推：
计算机应用基础基于JavaScript的WebGIS开发垃圾回收的算法与实现WCF全面解析Java完全自学教程
上一章目录下一章