vue常用指令(v-show)

最新推荐文章于 2024-07-19 10:16:01 发布

码进未来

最新推荐文章于 2024-07-19 10:16:01 发布

阅读量1.2k

点赞数 26

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/CAUC_lin/article/details/135836747

版权

vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

一、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>

显示图片 代码

<!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>

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>

测试结果

在这里插入图片描述

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>