介绍
v-show,类似 v-if,条件语句
注意:
- 不支持
<template>元素 - 不支持 v-else
例子
根据分数显示优、良、中、不及格
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app" v-cloak>
<div v-show="core>=90">优</div>
<div v-show="core>=80 && core<90">良</div>
<div v-show="core>=60 && core<80">及格</div>
</div>
<script type="importmap">
{
"imports": {
"vue": "./js/vue.esm-browser@3.5.13.js"
}
}
</script>
<script type="module">
import { createApp } from 'vue'
createApp({
data: function(){
return { //数据
core: 95
}
}
}).mount('#app')
</script>
查看网页源代码,如下图:
可知,元素都渲染了,但不符合条件的元素,不显示
