特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
在Vue中,我们可以使用v-if
和v-show
来控制元素或模板的渲染。而v-if
和v-show
也属于Vue的内部常用的指令。这里所说的指令就是directive
,指特殊的带有前缀v-
的命令,指令的值限定为绑定表达式,指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。
Vue中的内部指令有很多种,今天我们先学习其中的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中生成元素。比如:
<!-- 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
指令,并且设置其值为true
或false
。比如上面的示例,我们设置的是true
,元素被渲染。如果把上面的true
值换成false
,<h1>
元素就不会渲染。
除了直接给v-if
设置true
或false
之外,还可以通过表达式来做判断。比如:
<!-- 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
,然后在
如需转载,烦请注明出处:https://www.w3cplus.com/vue/v-if-vs-v-show.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!