v-if
条件判断使用 v-if 指令：
<body>
<div id="vue_study">
<p v-if="seen">现在你看到我了</p>
<template v-if="ok">
<h1>蓝谙</h1>
<p>今天很喜欢的一首歌是《曾经你说》</p>
<p>你今天喜欢的歌是什么呢？</p>
</template>
</div>
<script>
new Vue({
el: '#vue_study',
data:{
seen:true,
ok:true
}
})
</script>
</body>
v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
v-else
v-else可以给v-if添加一个else的语句块
<body>
<div id="vue_study">
r={{message}}
<div v-if="r==3">
Sorry!
</div>
<div v-else>
Happy!
</div>
</div>
<script>
new Vue({
el: '#vue_study',
data:{
message:4
}
})
</script>
</body>
v-else-if
用作 v-if 的 else-if 块，可以链式的多次使用
<body>
<div id="vue_study">
<div v-if="r==3">
Sorry!
</div>
<div v-else-if="r==4">
Happy!
</div>
<div v-else-if="r==5">
111111!
</div>
<div v-else>
2222!
</div>
</div>
<script>
new Vue({
el: '#vue_study',
data:{
r:4,
}
})
</script>
</body>
v-show
<h1 v-show="ok">Hello!</h1>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
