vue常用指令(v-show)_vue show

作者：秋刀鱼在做梦 | 2024-07-26 12:44:33

踩

vue show

一、v-show 指令

作用:
- 根据真假值,切换元素的显示状态

二、代码演示

1、v-show 绑定判断条件后，根据布尔值决定是否显示图片

不显示图片 代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 根据布尔值判断是否显示图片 -->
      <img v-show="isShow" src="./img/测试图片.jpeg" />
    </div>
  </body>

  <script src="js/vue.min.js"></script>
  <script>
    var Vm = new Vue({
      el: "#app",
      data: {
        // 定义显示状态
        isShow: false,
      },
      methods: {},
    });
  </script>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

显示图片 代码

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</title>
 </head>
 <body>
   <div id="app">
     <!-- 根据布尔值判断是否显示图片 -->
     <img v-show="isShow" src="./img/测试图片.jpeg" />
   </div>
 </body>

 <script src="js/vue.min.js"></script>
 <script>
   var Vm = new Vue({
     el: "#app",
     data: {
       // 定义显示状态
       isShow: true,
     },
     methods: {},
   });
 </script>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

2、添加按钮，控制图片的显示状态

修改代码

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</title>
 </head>
 <body>
   <div id="app">
     <!-- 添加按钮修改状态 -->
     <input type="button" value="修改图片状态" @click="changeImgShow" />
     <!-- 根据布尔值判断是否显示图片 -->
     <img v-show="isShow" src="./img/测试图片.jpeg" />
     <!-- <img v-show="num < 13" src="./img/测试图片.jpeg" /> -->
   </div>
 </body>

 <script src="js/vue.min.js"></script>
 <script>
   var Vm = new Vue({
     el: "#app",
     data: {
       // 定义显示状态
       isShow: true,
       num: 10,
     },
     methods: {
       changeImgShow: function () {
         //取反
         this.isShow = !this.isShow;
       },
     },
   });
 </script>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

测试结果

在这里插入图片描述

3、直接在 v-show 后跟上条件判断句

代码修改

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</title>
 </head>
 <body>
   <div id="app">
     <!-- 添加按钮修改状态 -->
     <!-- <input type="button" value="修改图片状态" @click="changeImgShow" /> -->
     <!-- 根据布尔值判断是否显示图片 -->
     <!-- <img v-show="isShow" src="./img/测试图片.jpeg" /> -->
     <img v-show="num < 13" src="./img/测试图片.jpeg" />
   </div>
 </body>

 <script src="js/vue.min.js"></script>
 <script>
   var Vm = new Vue({
     el: "#app",
     data: {
       // 定义显示状态
       isShow: true,
       num: 10,
     },
     methods: {
       changeImgShow: function () {
         //取反
         this.isShow = !this.isShow;
       },
     },
   });
 </script>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

4、原理分析

使用示例中的按钮点击事件，当点击按钮查看浏览器代码显示的变化：

图片显示:
图片消失:

对比可以看出，vue在底层修改了img的属性实现这一功能。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/885336