vue3教程：v-show指令 作者：马育民 • 2024-12-17 11:07 • 阅读：10002 # 介绍 `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> ``` 查看网页源代码，如下图： [](https://www.malaoshi.top/upload/pic/vue/QQ20210110110436.png) 可知，元素都渲染了，但不符合条件的元素，不显示 原文出处：http://malaoshi.top/show_1GWEgTUCc7k.html