Vue 2.0学习笔记:v-if 和 v-show

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

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

Vue中的内部指令有很多种,今天我们先学习其中的v-ifv-show两个指令。这两都也就是大家常说的条件渲染

v-if

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

v-if

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

<!-- template -->
<div id="app">
    <h1 v-if="true">v-if的值为true时,显示这个div元素</h1>
</div>

// JavaScript
var app = new Vue({
    el: '#app',
    data: {

    }
})

这个时候<h1>元素插入到div#app元素中,并渲染出来:

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

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

<!-- template -->
<div id="app">
    <h1 v-if="isShow">v-if的值为true时,显示这个div元素</h1>
</div>

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

上面的示例中,声明了isShow的值为true,然后在

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/vue/v-if-vs-v-show.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部