09_条件渲染

2023-6-28

条件渲染

v-show

动态给标签添加display属性，实现元素的显示与隐藏，一般用于高频切换展示与隐藏的元素。

<body>
  <div id="app">
    <h1>v-show</h1>
    <button @click="change1">v-show button</button>
    <p v-show="flag1" style="width: 400px; height: 200px; background-color: red"></p>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data() {
        return {
          flag1: false,
        };
      },
      methods: {
        change1() {
          this.flag1 = !this.flag1;
        },
      },
    });
  </script>
</body>

v-if

动态在DOM结点中动态添加与删除结点，一般用于低频切换展示与隐藏的元素。

<body>
  <div id="app">
    <h1>v-if</h1>
    <button @click="change2">v-if button</button>
    <p v-if="flag2" style="width: 400px; height: 200px; background-color: red"></p>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data() {
        return {
          flag2: false,
        };
      },
      methods: {
        change2() {
          this.flag2 = !this.flag2;
        },
      },
    });
  </script>
</body>

同时v-if还可以配合v-else-if和v-else使用，值得注意的是使用它们必须挨着，不允许在中间添加其他标签

<body>
  <div id="app">
    <h1>count:{{ count }}</h1>
    <button @click="count++">count++</button>
    <p v-if="count === 1">One</p>
    <p v-else-if="count === 2">Two</p>
    <!-- <p></p> -->
    <p v-else-if="count === 3">Three</p>
    <p v-else>NO</p>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data() {
        return {
          count: 0,
        };
      },
    });
  </script>
</body>

同时展示多个，不破坏页面结构

如果多个元素都满足条件一个条件可以写成这样：

<div id="app">
  <h1>count:{{ count }}</h1>
  <button @click="count++">count++</button>
  <template v-if="count === 1">
    <p>One</p>
    <p>1</p>
    <p>一</p>
  </template>
  <p v-else-if="count === 2">Two</p>
  <p v-else-if="count === 3">Three</p>
  <p v-else>NO</p>
</div>

template标签不会被解析，满足条件时，页面上只会渲染三个p标签

阅读剩余

THE END