Vue v-show 指令

来自姬鸿昌的知识库
跳到导航 跳到搜索

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”