vue3教程:v-show指令

介绍

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>

查看网页源代码,如下图:

可知,元素都渲染了,但不符合条件的元素,不显示


原文出处:/show_1GWEgTUCc7k.html