VueJS条件语句：v-ifv-elsev-else-if
Posted 君临
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VueJS条件语句：v-ifv-elsev-else-if相关的知识，希望对你有一定的参考价值。
html:if-else
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-if="Math.random() > 0.5">
Sorry
</div>
<div v-else>
Not sorry
</div>
</div>
<script>
new Vue({
el: ‘#app‘
})
</script>
</body>
</html>
HTML:if-else if-else
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-if="type === ‘A‘">
A
</div>
<div v-else-if="type === ‘B‘">
B
</div>
<div v-else-if="type === ‘C‘">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script>
new Vue({
el: ‘#app‘,
data: {
type: ‘C‘
}
})
</script>
</body>
</html>
v-show
我们也可以使用 v-show 指令来根据条件展示元素：
<h1 v-show="ok">Hello!</h1>
以上是关于VueJS条件语句：v-ifv-elsev-else-if的主要内容，如果未能解决你的问题，请参考以下文章