
3.2 v-if v-else v-show
vue提供了vif和vshow两个指令来控制页面元素的显示和隐藏。我们先通过一段代码来看一下使用两个指令各有什么效果:
- **v-if **: 如果vlaue为true, 当前标签会输出在页面中
- v-show : 就会在标签中添加display样式, 如果vlaue为true, display=block, 否则是none
- v-else : 与v-if一起使用, 如果value为false, 将当前标签输出到页面中
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<div>
<div>
<button>我是添加按钮,我一直在</button>
</div>
<div>
<button v‐show="deleteButton">我是删除按钮,我通过v‐show控制显隐</button>
<button v‐on:click="deleteButton = true">设置显示</button>
<button v‐on:click="deleteButton = false">设置隐藏</button>
</div>
<div>
<button v‐if="editButton">我是修改按钮,我通过v‐if控制显隐</button>
<button v‐on:click="editButton = true">设置显示</button>
<button v‐on:click="editButton = false">设置隐藏</button>
</div>
</div>
</html>
页面显示效果
上面我们已经了解了v-if的使用方法。事实上,vif的条件渲染和JavaScript条件判断语
句中的if、else、else if非常类似。
**v-else、v-elseif **: 与v-if一起使用, 如果value为false, 将当前标签输出到页面中
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<div>
<div v‐if="number === 1">
A
</div>
<div v‐else‐if="number === 2">
B
</div>
<div v‐else>
C
</div>
</div>
</html>
本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 Eternal Night
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果