1-7.vue指令：v-if和v-show指令

最新推荐文章于 2023-05-30 06:15:00 发布

堵车了

最新推荐文章于 2023-05-30 06:15:00 发布

阅读量310

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_45660035/article/details/111058556

版权

vue 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

1-7.vue指令：v-if和v-show指令

v-if指令的作用

v-if指令是根据其表达式里面的值是否为真来展示相应的内容，一般与v-else-if和v-else指令一起使用，最典型的使用场景是不同账号之间登录的切换。

v-if指令的使用

1.代码展示

<body>
  <div id='app'>
    <a @click='aClick' href="#">切换登录方式</a>
    <div>
      <div v-if="changeLogin">
        <label for="account">
          账号：
          <input id="account" type='text' placeholder="请输入账号" />
        </label>
        <br />
        <label for="password">
          密码：
          <input id="password" type='text' placeholder="请输入密码" />
        </label>
      </div>
      <div v-else>
        <label for="telphone">
          手机号：
          <input id="telphone" type='text' placeholder="请输入手机号" />
        </label>
        <br />
        <label for="password">
          验证码：
          <input id="password" type='text' placeholder="请输入验证码" />
        </label>
      </div>
    </div>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        changeLogin: true
      },
      methods: {
        aClick() {
          this.changeLogin = !this.changeLogin;
        }
      }
    });
  </script>

</body>

2.过程分解

在这里插入图片描述

3.结果展示

在这里插入图片描述

v-show指令的作用

v-show指令严格的来说和单单使用v-if所能实现的页面视觉效果是一样的。但是实现的原理却有所不同，下面将展示两则实现的原理

v-show指令的使用

1.代码展示

<body>
  <div id='app'>
    <a @click='aClick' href="#">是否展示</a>
    <div v-show='ishow'>
      <h5>{{message}}</h5>
    </div>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'v-show指令的演示',
        ishow: true
      },
      methods: {
        aClick() {
          this.ishow = !this.ishow;
        }
      }
    });
  </script>

</body>