【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>

具体可以看控制台输出：

相关阅读:
在两台CentOS 7服务器上部署MinIO集群。
MES系统是如何采集Modbus设备数据的呢？
cmip6数据如何下载？您是利用官方网站手动人工下载还是半自动购物车方式？
完整的 HTTPS 的通信
Java如何用EasyExcel插件对Excel进行数据导入和数据导出
（附源码）ssm华立学院门户网站毕业设计 290011
eNSP - PIM 查看命令
注意！年底前没参加继续教育的会计，或将无法报名2023年会计考试！
Greenplum-备份与恢复
SpringCloud 注册中心 (Eureka) 快速入门

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