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

4.2　v-show指令

v-show指令通过改变元素的css属性（display）来决定元素是显示还是隐藏。

4.2.1　v-show指令的用法

v-show指令主要用来决定它所在区块显示与否。

通用语法如下：

v-show = "布尔值true或false"

其中，true表示所在区块显示，false表示不显示。

在下面的示例中，我们定义不同的变量值，然后根据变量的值来确认是显示还是隐藏。具体步骤如下：

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

2）在html视图中，使用v-show结合变量xianshi1（设置变量的值为true）来使用：

<div v-show="xianshi1" id="id01">show=true</div>

3）在html视图中，使用v-show结合变量xianshi2（设置变量的值为false）来使用：

<div v-show="xianshi2" id="id02">show=false</div>

完整示例代码如下：

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

        <!--属性xianshi1的值为true，则下面段落的内容会显示在浏览器中-->
        <div v-show="xianshi1" id="id01">show=true</div>

        <!--属性xianshi2的值为false，则下面段落的内容不会显示在浏览器中-->
        <div v-show="xianshi2" id="id02">show=false</div>

    </div>
    
    <script>
    //下面是Vue.js的代码块-开始
    new Vue({
        el: '#app',//app为前面div代码块的id的值，通过“#”绑定
        //data区域定义属性的值
        data: {
            xianshi1:true, //定义布尔型值
            xianshi2:false //定义布尔型值
            //后面没有数据，则这里定义完毕，后面不需要跟上逗号“，”
        }
    })//Vue.js的代码块-结束
    </script>    
    
</body>
</html>

效果如图4-4所示。

图4-4　v-show指令

4.2.2　v-show指令和v-if指令的区别

v-show仅是隐藏/显示，值为false时，该元素依旧存在于DOM树中。若其原有样式设置了display：none，则会导致其无法正常显示。

v-if是动态添加，当值为false时，完全移除该元素，即DOM树中不存在该元素。

下面我们做一个示例：使用v-show的代码块，不管v-show后面的值是true还是false，在DOM树中都能读取对应的信息；使用v-if的代码块，如果v-if后面的值是true，则可以读取对应的信息；如果v-if后面的值是false，因为不存在了，则读取不到。

完整示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue.js中v-show指令和v-if指令的区别</title>
    <!--加载本地vue.js的框架-->
    <script src="vue2.2.2.min.js"></script>
</head>
<body>
    <!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
    <div id="app">
        <!--属性xianshi1的值为true，则下面段落的内容会显示在浏览器中-->
        <div v-show="xianshi1" id="id01">show=true</div>
        <!--属性xianshi2的值为false，则下面段落的内容不会显示在浏览器中-->
        <div v-show="xianshi2" id="id02">show=false</div>
        <button onClick="my01()">第1个按钮：读取show的Dom内容</button>
        
        <!--属性xianshi1的值为true，则下面段落的内容会显示在浏览器中-->
        <div v-if="xianshi1" id="id03">if=true</div>
        <!--属性xianshi2的值为false，则下面段落的内容不会显示在浏览器-->
        <div v-if="xianshi2" id="id04">if=false</div>
        <button onClick="my02()">第2个按钮：读取if的Dom内容</button>        
    </div>
    
<script>
//下面是Vue.js的代码块-开始
new Vue({
    el: '#app',//app为前面div代码块的id的值，通过“#”绑定
    //data区域定义属性的值
    data: {
        xianshi1:true, //定义布尔型值
        xianshi2:false //定义布尔型值
        //后面没有数据，则这里定义完毕，后面不需要跟上逗号“，”
    }
})//Vue.js的代码块-结束

function my01(){
    var tmp= "";
    tmp = tmp + "id01内容：" + document.getElementById("id01").innerHTML;
    tmp = tmp + "| id02内容：" + document.getElementById("id02").innerHTML;
    //弹出标签的内容
    alert(tmp);
}
function my02(){
    //弹出标签的内容
    alert("id03内容：" + document.getElementById("id03").innerHTML)
    //判断id为id04的标签是否存在
    if(document.getElementById("id04")){
    }else{
        //标签不存在
        alert("id为'id04'的标签不存在");
    }
}            
</script>    
    
</body>
</html>

效果如图4-5～图4-8所示。

图4-5　页面运行默认效果图

图4-6　读取id="id01"和id="id02"的值

图4-7　读取id="id03"的值

图4-8　读取id="id04"的值

上一章目录下一章