Vue指令v-show

最新推荐文章于 2025-04-13 22:17:50 发布

慕斯-ing

最新推荐文章于 2025-04-13 22:17:50 发布

阅读量500

点赞数 5

分类专栏： Vue2.x 文章标签： vue.js 前端经验分享

本文链接：https://blog.csdn.net/blbyu/article/details/145767319

版权

Vue2.x 专栏收录该内容

20 篇文章

订阅专栏

一、Vue中的v-show指令是什么？

v-show指令是根据表达值的真假，切换元素的显示和隐藏，其本质原理是切换元素的display属性。
注意：v-show指令后面的内容最终都会解析为布尔值，true显示元素，false隐藏元素。
注意：v-show指令内的数据布尔值改变后，对应元素的显示状态也会同步更新。

二、v-show的使用

<!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>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div id="app" >
    <!-- v-show绑定固定值 -->
    <p v-show="false">大家好，我是看不见的老慕斯。</p>
    <p v-show="true">大家好，我是看的见的小慕斯。</p>
    <!-- v-show绑定可变值 -->
    <button @click="changeIsShow">
      {{isSee}}
    </button>
    <p v-show="isShow">大家好，我是变化多端的慕斯</p>
  </div>
</body>

</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      isSee:'点击有惊喜',
      isShow:false
    },
    methods:{
      changeIsShow:function(){
        this.isShow = !this.isShow;
      }
    }
  });
</script>