“Vue v-show 指令”的版本间的差异

来自姬鸿昌的知识库
跳到导航 跳到搜索
 
第17行： 第17行：
 
   }
 
   }
 
})
 
})
 +
</syntaxhighlight><syntaxhighlight lang="html">
 +
<!DOCTYPE html>
 +
<html lang="en">
 +
<head>
 +
    <meta charset="UTF-8">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 +
    <title>v-show指令</title>
 +
</head>
 +
<body>
 +
    <div id="app">
 +
        <input type="button" value="切换显示状态" @click="changeIsShow">
 +
        <input type="button" value="累加年龄" @click="addAge">
 +
        <!-- <img v-show="true" src="s14.gif" alt="" > -->
 +
        <img v-show="isShow" src="s14.gif" alt="" >
 +
        <img v-show="age>=18" src="s140.gif" alt="" >
 +
    </div>
 +
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
 +
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 +
<script>
 +
    var app = new Vue({
 +
        el:"#app",
 +
        data:{
 +
            isShow: false,
 +
            age:17
 +
        },
 +
        methods:{
 +
            changeIsShow:function(){
 +
                this.isShow = !this.isShow;
 +
            },
 +
            addAge:function(){
 +
                this.age++;
 +
            }
 +
        }
 +
    })
 +
</script>
 +
</body>
 +
</html>
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
* <u>v-show</u> 指令的作用是：根据真假切换元素的显示状态
 +
* 原理是修改元素的 display，实现显示隐藏
 +
* 指令后面的内容，最终都会解析为<u>布尔值</u>
 +
* 值为 <u>true</u> 元素显示，值为 <u>false</u> 元素隐藏

2023年6月8日 (四) 16:03的最新版本

https://www.bilibili.com/video/BV12J411m7MG/?p=11

根据表达值的真假，切换元素的显示和隐藏

<div id="app">
  <img src="地址" v-show="true">
  <img src="地址" v-show="isShow">
  <img src="地址" v-show="isNotShow">
  <img src="地址" v-show="age>=18">
</div>

var app = new Vue({
  el:"#app",
  data:{
    isShow:true,
    isNotShow:false,
    age:16
  }
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-show指令</title>
</head>
<body>
    <div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <input type="button" value="累加年龄" @click="addAge">
        <!-- <img v-show="true" src="s14.gif" alt="" > -->
        <img v-show="isShow" src="s14.gif" alt="" >
        <img v-show="age>=18" src="s140.gif" alt="" >
    </div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isShow: false,
            age:17
        },
        methods:{
            changeIsShow:function(){
                this.isShow = !this.isShow;
            },
            addAge:function(){
                this.age++;
            }
        }
    })
</script>
</body>
</html>
  • v-show 指令的作用是：根据真假切换元素的显示状态
  • 原理是修改元素的 display，实现显示隐藏
  • 指令后面的内容，最终都会解析为布尔值
  • 值为 true 元素显示，值为 false 元素隐藏
取自“https://www.jihongchang.top/index.php?title=Vue_v-show_指令&oldid=6977”