06-条件判断

最新推荐文章于 2023-02-17 19:45:32 发布

小影

最新推荐文章于 2023-02-17 19:45:32 发布

阅读量73

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/small_shadow/article/details/112692530

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

01-v-if和v-else

利用if，else if 和else来判断要显示的内容以及一些要判断的地方

<body>
    <div id="app">
      <!-- v-if后写布尔值，为true时显示对应内容 -->
      <h2 v-if="isSHow">这是让我显示的时候</h2>
      <h2 v-else>这是不让我显示的时候</h2>
      <button @click="Change">切换</button>

      <!-- v-else-if的使用方法跟上面差不多 -->
      <h2 v-if="score>80">优秀</h2>
      <h2 v-else-if="score>60">还行</h2>
      <h2 v-else>废物</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          score: 70,
          isSHow: true,
        },
        methods: {
          Change() {
            this.isSHow = !this.isSHow;
          },
        },
      });
    </script>
  </body>

02-v-show

注意v-show和v-if的使用区别

<body>
    <div id="app">
      <!--v-if: 当条件为false时， 包含v-if指令的元素，根本就不会存在dom中-->
      <h2 v-if="isShow" id=" aaa">{{message}}</h2>

      <!--V-show: 当条件为false时， V- show只是给我们的元素添加一个行内样式: display: none-->
      <h2 v-show=" isShow" id="bbb">{{message}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "小影",
          isShow: true,
        },
      });
    </script>
  </body>