v-if
- 指令的值可以是一个布尔值, 也可以是一个判断条件
- 用于决定一个标签元素是否在页面中渲染
- 如果值为真, 则指令的标签会加载在页面中, 为false则不会加载在页面中(不会存在)
<div id="app">
<h2 v-if="false">{{meassage}}</h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
meassage: "你好你好"
}
})
</script>
v-if 和 v-else
- 如果v-if的值为真则会加载 v-if的标签, 否则会加载v-else 的标签
<div id="app">
<ul v-if="isShow">
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ul>
<div v-else>v-if为假的时候,显示的div</div>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
isShow: true
}
})
</script>
v-if 和 v-else-if 和 v-else
- 如果有多种情况需要判断的的话, 可以用v-else-if 指令写更多的情况, 但是一般不会将判断的过程写在页面的标签指令中, 而是写在 computed 计算属性中, 这样代码更好看
<div id="app">
<h2 v-if="scort>=90">优秀</h2>
<h2 v-else-if="scort>=80">良好</h2>
<h2 v-else-if="scort>=60">及格</h2>
<h2 v-else>不及格</h2>
<h1>{{result}}</h1>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
scort: 55,
},
computed: {
result() {
let showMeassage = "";
if (this.scort >= 90) {
showMeassage = "优秀";
} else if (this.scort >= 80) {
showMeassage = "良好";
} else if (this.scort >= 60) {
showMeassage = "及格";
} else {
showMeassage = "不及格"
}
return showMeassage;
}
}
})
</script>
v-show
- v-show是用来决定元素是否在dom中显示的, 如果值为false,则会在对应的元素加上行内样式, display=“none”
- 与v-if的区别是, v-if是用来决定元素是否在dom中渲染, 如果值为false, 那么对应的元素则不会被渲染出来
- 开发中, 如果元素在页面中的切换很频繁, 那么就使用v-show, 如果元素在页面中只切换一次的话就用v-if, 开发中v-if常用一点
<div id="app">
<h2 v-if="isShow">{{message}}</h2>
<h2 v-show="isShow">{{message}}</h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好呀",
isShow: true
}
})
</script>