1. v-if
1.1 v-if
語法示例
<p v-if="show">甲</p>
完整示例
如下：
- 如果
show是false，則甲不會顯示。- 如果ok是flase
template中 三奇六儀的信息都不會顯示- 但是
show和template我們都設(shè)置了true，所以有后邊的輸出。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>遁甲天書</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="show">甲</p>
<template v-if="ok">
<h1>三奇六儀</h1>
<p>三奇：乙丙丁</p>
<p>六儀：戊己庚辛壬癸</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
show: true,
ok: true
}
})
</script>
</body>
</html>
-
結(jié)果顯示
image.png
1.2 v-else
語法示例
<div id="app">
<div v-if="Math.random()*100 >= 60">及格了</div>
<div v-else>不及格</div>
</div>
完整示例
獲取一個隨機數(shù)字（0~100），如果 大于等于60 輸出 “及格”，否則輸出“不及格”。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CROW SONG</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-if="Math.random()*100 >= 60">及格了</div>
<div v-else>不及格</div>
</div>
<script>
new Vue({
el: "#app",
});
</script>
</body>
</html>
1.3 v-else-if
語法示例
<div id="app">
<div v-if="scores >= 90">優(yōu)</div>
<div v-else-if="scores >= 80">良</div>
<div v-else-if="scores >= 60">中</div>
<div v-else>差</div>
</div>
完整示例
- 代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-if="scores >= 90">優(yōu)</div>
<div v-else-if="scores >= 80">良</div>
<div v-else-if="scores >= 60">中</div>
<div v-else>差</div>
</div>
<script>
new Vue({
el: "#app",
data: {
scores: 88,
},
});
</script>
</body>
</html>
- 輸出
良
多個v-else-if 的判斷邏輯
上文的多個
v-else-if是從上到下依次判斷
- 示例
將上例中的中和良交換位置如下：
<div id="app">
<div v-if="scores >= 90">優(yōu)</div>
<div v-else-if="scores >= 60">中</div>
<div v-else-if="scores >= 80">良</div>
<div v-else>差</div>
</div>
- 顯示結(jié)果
中
可見多個else-if 是從上到下依次判斷的，“良”的結(jié)果被“中”截胡了。
2. v-show
2.1 使用
語法示例
<h1 v-show="ok">Hello!</h1>
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CROW SONG</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1 v-show="ok">Hello!</h1>
</div>
<script>
new Vue({
el: "#app",
data: {
ok: true,
},
});
</script>
</body>
</html>
2.2 和v-if 比較
如1.3 v-else-if 中的示例，如果我們直接改成v-show
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CROW SONG</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-show="scores >= 90">優(yōu)</div>
<div v-show="scores >= 80">良</div>
<div v-show="scores >= 60">中</div>
<div v-show>差</div>
</div>
<script>
new Vue({
el: "#app",
data: {
scores: 92,
},
});
</script>
</body>
</html>
- 輸出為
優(yōu)
良
中
可見，三條 v-show會分別判斷（而不會有邏輯關(guān)系）
但1.3中，我們可以看到，v-if雖然在三個div中，仍然會從上到下依次判斷
image.png
