【Vue】v-if和v-show的区别

v-if：按条件渲染，判定为true时渲染，否则不渲染

v-show：按条件展示，区别在于切换的是display属性的值


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-if与v-showtitle>
    <script src="js/vue.js">script>
head>
<body>
    <div id="app">
 
        
        年龄<input type="text" v-model="age">经判定,为:
        <span v-if="age <= 35">年轻人(35及以下)span>
        <span v-else-if="age > 35 && age < 60">中年人(35-60)span>
        <span v-else>老年人(60及以上)span>
 
        <br><br>
 
        
        年龄<input type="text" v-model="age">经判定,为:
        <span v-show="age <= 35">年轻人(35及以下)span>
        <span v-show="age > 35 && age < 60">中年人(35-60)span>
        <span v-show="age >= 60">老年人(60及以上)span>
 
    div>
body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           age: 20
        },
        methods: {
            
        }
    })
script>
html>

具体可以看控制台输出：

相关阅读:
力扣399题：除法求值
珠宝加工厂：我的成本下降空间在哪里？
talib库明明下载成功了，但是引用不成功是为什么
DBCO-PEG-OPSS/OPSS-PEG-DBCO/二苯并环辛炔聚乙二醇修饰邻吡啶二硫
RabbitMQ 集群和镜像队列
【产品经理】APP备案（阿里云）
Transformers实战（二）快速入门文本相似度、检索式对话机器人
网络学习(十) | 深入学习HTTPS与安全传输
【数据结构复习】第五章树和二叉树
Jupyter Notebook的安装和使用

原文地址：https://blog.csdn.net/have_to_be/article/details/133870488