Vue 常用指令显示切换 v-show

v-show指令的作用是根据后面表达式的真假，让元素显示或者隐藏。

有哪些情况需要切换元素的显示？比如广告，或者遮罩层。

v-show后面的值一般是定义在vue实例当中的数据，这样就不是写死固定了。

如果元素的显示条件更加复杂，那么还支持一些表达式，比如有age属性，图片需要age满足某些属性才可以显示，比如大于18岁，那么只需要写上大于等于18就行了，最终都会=解析为布尔值。

如果false那么图片就不会显示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style type="text/css">
    </style>
</head>
 
<body>  
<div id="app">
    <button type="button" @click="changeIsShow">changeIsShow</button>
<img src="https://img.zcool.cn/community/019e435f31f2a9a801215aa07ef0d3.png?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100" v-show="false" alt="">
<img src="https://img.zcool.cn/community/019e435f31f2a9a801215aa07ef0d3.png?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100" v-show="isShow" alt="">
<img src="https://img.zcool.cn/community/019e435f31f2a9a801215aa07ef0d3.png?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100" v-show="age>10" alt="">

</div>
         
    <script type="text/javascript">
        
      new Vue({   
          el: "#app",   
          data:{ 
            isShow: true,
            age: 16
          },
          methods:{
          changeIsShow:function(){
            this.isShow = !this.isShow
          }
       }
       }
)
        
    </script>
 
</body>
</html>

Vue 常用指令 显示切换 v-show

猜你喜欢

Vue 常用指令显示切换 v-show