重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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

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

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

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

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

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

v-if  : 条件分支指令


咱们先来看v-if指令。其作用就是根据表达式的值truefalse在DOM中生成或者移除一个元素(或多个元素)。有点类似JavaScript中的if条件判断。在Vue中除了v-if也有v-else-ifv-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指令,并且设置其值为truefalse。比如上面的示例,我们设置的是true,元素被渲染。如果把上面的true值换成false

元素就不会渲染。

除了直接给v-if设置truefalse之外,还可以通过表达式来做判断。比如:



    
    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-showv-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 不支持