四川盐亭网站制作公司

Vue条件渲染指令v-if和v-show怎么使用

这篇文章主要讲解了“Vue条件渲染指令v-if和v-show怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue条件渲染指令v-if和v-show怎么使用”吧！

创新互联公司网络公司拥有十多年的成都网站开发建设经验，超过千家客户的共同信赖。提供成都做网站、网站建设、网站开发、网站定制、卖友情链接、建网站、网站搭建、成都响应式网站建设、网页设计师打造企业风格，提供周到的售前咨询和贴心的售后服务

在Vue中，我们可以使用v-if和v-show来控制元素或模板的渲染。而v-if和v-show也属于Vue的内部常用的指令。这里所说的指令就是directive，指特殊的带有前缀v-的命令，指令的值限定为绑定表达式，指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。

Vue条件渲染指令v-if和v-show怎么使用

v-if和v-show两个指令就是大家常说的条件渲染指令。

v-if  : 条件分支指令

咱们先来看v-if指令。其作用就是根据表达式的值true或false在DOM中生成或者移除一个元素（或多个元素）。有点类似JavaScript中的if条件判断。在Vue中除了v-if也有v-else-if和v-else之类。

v-if

前面说到过v-if根据表达式来的值来判断在DOM中生成元素。比如：



    v-if的值为true时，显示这个div元素
// JavaScript var app = new Vue({     el: '#app',     data: {     } })

这个时候

元素插入到div#app元素中，并渲染出来：

Vue条件渲染指令v-if和v-show怎么使用

在Vue中，如果你需要让某个元素是否渲染，那就在该元素上添加v-if指令，并且设置其值为true或false。比如上面的示例，我们设置的是true，元素被渲染。如果把上面的true值换成false，

元素就不会渲染。

除了直接给v-if设置true或false之外，还可以通过表达式来做判断。比如：



    
    v-if的值为true时，显示这个div元素
    

// JavaScript     var app = new Vue({     el: '#app',     data: { isShow: true } })

上面的示例中，声明了isShow的值为true，然后在h2元素中，通过v-if指令绑定isShow。其实类似于v-if="true"。h2元素也正常渲染：

Vue条件渲染指令v-if和v-show怎么使用

当你把isShow设置为false时，h2元素又不会渲染。

Vue条件渲染指令v-if和v-show怎么使用

上面我们看到的是渲染一个元素,如果要渲染多个元素，那是不是直接里面嵌套多个元素呢？我们来验证一下自己的想法：



    
        
我是标题

        
我是段落

    

Vue条件渲染指令v-if和v-show怎么使用

和我们想像的一样。但在Vue中，我们切换多个元素一般不这么使用，而是配合

v-else-if

v-else-if和JavaScript中的else if类似，需要和v-if配合在一起使用。当有几个条件同时在的时候，根据运算结果决定显示与否。如下面的代码，根据type的值决定显示哪一个区块。比如，我们的例子，设定的type的值B，那么就会显示区块B：



    显示A区域
    显示B区域
    显示C区域


// JavaScript
var app = new Vue({
    el: '#app',
    data: {
        type: "B"
    }
})

如果修改type的值，将显示的区域会不一样：

Vue条件渲染指令v-if和v-show怎么使用

v-show

文章开头提到过，除了v-if之外，Vue还提供v-show也可以控制元素的渲染。v-show和v-if功能有点相似，其中v-if依赖于控制DOM节点，而v-show是依赖于控制DOM节点的display属性。当v-show传入的值为true时，对应DOM元素的display的值为block之类的，反之为false时，display的值为none。也就是用户看不到元素的显示，但其DOM元素还是存在的。



    我是一个标题
    我是一个段落



// JavaScript
var app = new Vue({
    el: '#app',
    data: {
        isShow: false
    }
})

在浏览器看到的效果将是这样的：

Vue条件渲染指令v-if和v-show怎么使用

注意，v-show 不支持