07-Vue的条件判断

最新推荐文章于 2023-04-20 17:37:49 发布

蓝带915

最新推荐文章于 2023-04-20 17:37:49 发布

阅读量301

点赞数 1

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_42647711/article/details/104597035

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

v-if的使用

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      你好
      <h2 v-if="isShow">{{message}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好",
          isShow: false
        }
      })
    </script>
  </body>
</html>

1.v-if的使用

即对当前标签根据一个boolean判断是否显示。

<h2 v-if="isShow">{{message}}</h2>

此时isShow的值为false，则页面并不会显示message的内容。

v-if和v-else的使用

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <h2 v-if="isShow">{{message}}</h2>
      <h2 v-else>isShow为false时，显示我</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好",
          isShow: true
        }
      })
    </script>
  </body>
</html>

1.使用规则

当if为false时，则显示用else标记的标签中的内容，if和else在多数语言中都有且用法相似，在这里不做过多的讲解。

v-if和v-else-if和v-else的使用

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <h2 v-if="score >= 90">优秀</h2>
      <h2 v-else-if="score >= 80">良好</h2>
      <h2 v-else-if="score >= 60">及格</h2>
      <h2 v-else="score < 60">不及格</h2>

      <!-- 当逻辑判断比较多时，不建议写在html里面，可以写在计算属性里 -->
      <h1>{{result}}</h1>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          score: 99
        },
        computed: {
          result() {
            let showMessage = ""
            if (this.score >= 90) {
              showMessage = "优秀"
            } else if (this.score >= 80) {
              showMessage = "良好"
            } else if (this.score >= 60) {
              showMessage = "及格"
            } else {
              showMessage = "不及格"
            }
            return showMessage
          }
        }
      })
    </script>
  </body>
</html>

1.v-else-if的使用

当有多个选择项时，可以使用v-else-if进行多层嵌套。if和else在多数语言中都有且用法相似，在这里不做过多的讲解。

用户登录切换的案例

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <span v-if="isUser">
        <label for="username">用户帐号</label>
        <input type="text" id="username" placeholder="用户帐号" />
      </span>
      <span v-else>
        <label for="email">用户邮箱</label>
        <input type="text" id="email" placeholder="用户邮箱" />
      </span>
      <button @click="isUser = !isUser">切换类型</button>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          isUser: true
        }
      })
    </script>
  </body>
</html>

1.内容简介

将帐号登录和邮箱登录分别放在if和else标记的标签，点击button切换boolean的值，即可完成操作。

v-show的使用

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <h2 v-if="isShow">{{message}}</h2>

      <h2 v-show="isShow">{{message}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好",
          isShow: true
        }
      })
    </script>
  </body>
</html>

1.v-show是什么

v-show是和v-if类似的判断是否显示的标签，如果判断变量为false，则标签中内容同样不会显示，代码如下：

<h2 v-show="isShow">{{message}}</h2>

2.v-show和v-if的区别

v-if判断失败时，则该元素不存在。
v-show判断失败时，该元素依然存在，只是看不到(display:none)

3.该如何选择

当需要在显示与隐藏之间切片很频繁时，推荐使用v-show。
当只有一次切换时，推荐使用v-if。

第一次记录自己的学习笔记，如果您发现问题，欢迎指点。

蓝带915

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
07-Vue的条件判断

v-if的使用<html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <div id="app"> 你好 <h2...
复制链接

扫一扫