掌握vue指令之(2)v-show指令

最新推荐文章于 2023-12-21 22:53:37 发布

猿音

最新推荐文章于 2023-12-21 22:53:37 发布

阅读量449

点赞数 1

分类专栏：笔记 vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43348064/article/details/106224503

版权

笔记同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

vue

21 篇文章 0 订阅

订阅专栏

(2).v-show指令

功能: 控制一个元素的显示隐藏
如何: <元素 v-show=“返回bool类型的js表达式”>
原理:

new vue()扫描到v-show时，就会先自动计算=后的js表达式的值，得到一个bool值。
如果执行结果为true则，当前元素什么都不干，默认显示！
如果执行结果为false则，当前元素自动添加display:none，隐藏。

例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .alert {
        width: 300px;
        height: 100px;
        border: 1px solid #555;
        position: fixed;
        top: 50%;
        left: 50%;
        margin-left: -150px;
        margin-top: -50px;
      }

      .alert > p {
        text-align: right;
      }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <button @click="login">登录</button>
      <div class="alert" v-show="show">
        <p><a href="javascript:;" @click="close">×</a></p>
        用户名:<input /><br />
        密码:<input type="password" /><br />
        <button>登录</button>
      </div>
    </div>

    <script>
      new Vue({
        el: "#app",
        data: {
          show: false, //希望div.alert开始时默认隐藏
        },
        methods: {
          login() {
            this.show = true;
          },
          close() {
            this.show = false;
          },
        },
      });
    </script>
  </body>
</html>

效果1	效果2	效果3

东哥笔记

猿音

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
掌握vue指令之(2)v-show指令

(2).v-show:功能: 控制一个元素的显示隐藏如何: <元素 v-show=“返回bool类型的js表达式”>原理:new vue()扫描到v-show时，就会先自动计算=后的js表达式的值，得到一个bool值。如果执行结果为true则，当前元素什么都不干，默认显示！如果执行结果为false则，当前元素自动添加display:none，隐藏。例子：<!DOCTYPE html><html lang="en"> <head>
复制链接

扫一扫

专栏目录