Vue v-show 指令

Vue.js 提供了一个 v-show 指令，它根据后面表达式的真假，来决定一个元素显示或者隐藏。

v-show 指令是通过改变元素的 css 的 display 属性，控制元素的显示和隐藏状态。

 

1. v-show 指令

v-show 指令的后面，需要跟着一个布尔变量或者布尔表达式，当值为 true 时显示元素，当值为 false 时隐藏元素。

html 代码：

<div id="app">
    <p v-show="flag == '显示'">编程宝库 Vue 课程</p>
</div>

javascript 代码：

<script>
    var app = new Vue({
        el: '#app',
        data: {
            flag: '隐藏'
        }
    });
</script>

当 flag 设置为 '隐藏' 时，就不会显示 “编程宝库 Vue 课程”；当 flag 设置为 '显示' 时，就会显示 “编程宝库 Vue 课程”。

实际上，当 flag 设置为 '隐藏' 时，p 元素的 css 属性 display 被设置为 none，所以元素就被隐藏了。

渲染后的代码如下：

<p style="display: none;">编程宝库 Vue 课程</p>

 

2. v-show 范例

下面是完整的 Vue v-show 指令的使用案例，可以通过修改 flag 的值，决定 p 元素是否显示。

<html>
<head>
    <title>编程宝库 Vue教程</title>
</head>
<body>
    <div id="app"> 
        <p v-show="flag == '显示'">编程宝库 Vue 课程</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',	
            data: {
                flag: '隐藏'
            }
        })
    </script>
</body>
</html>

我要试一试

3. Vue 视频教程

视频地址：https://www.bilibili.com/video/BV12J411m7MG?p=11&share_source=copy_web

Vue.js 提供了用于判断的 v-if、v-else 指令，用于控制元素的显示与隐藏。1. v-if 指令：使用 v-if 指令对条件进行判断，控制元素的显示与隐藏。2. v-else 指令：可以用 v-else 指令给 v-if 添加一个 "else" 块。3. v-else-if 指令：v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块，可以链式的多次使用。