条件渲染

条件渲染

在 Vue3 中，可以使用v-if、v-else、v-else-if和v-show指令来实现条件渲染

使用v-if实现条件渲染

<template>
  <div>
    <h1 v-if="isVisible">Hello, Vue3!</h1>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
  import { ref } from "vue";

  export default {
    setup() {
      const isVisible = ref(true);

      function toggleVisibility() {
        isVisible.value = !isVisible.value;
      }

      return { isVisible, toggleVisibility };
    },
  };
</script>

在这个例子中，当isVisible为true时，显示 "Hello, Vue3!"，否则不显示。点击按钮可以切换isVisible的值。

注意事项：

• v-if指令后面的表达式需要返回一个布尔值。
• 如果需要更复杂的条件判断，可以使用计算属性或者方法。

使用v-else实现条件渲染

<template>
  <div>
    <h1 v-if="isVisible">Hello, Vue3!</h1>
    <h1 v-else>Hello, World!</h1>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
  import { ref } from "vue";

  export default {
    setup() {
      const isVisible = ref(true);

      function toggleVisibility() {
        isVisible.value = !isVisible.value;
      }

      return { isVisible, toggleVisibility };
    },
  };
</script>

在这个例子中，当isVisible为true时，显示 "Hello, Vue3!"，否则显示 "Hello, World!"。点击按钮可以切换isVisible的值。

注意事项：

• v-else必须紧跟在v-if或v-else-if之后。
• 如果需要更复杂的条件判断，可以使用计算属性或者方法。

使用v-else-if实现条件渲染

<template>
  <div>
    <h1 v-if="isVisible">Hello, Vue3!</h1>
    <h1 v-else-if="isGreeting">Hello, User!</h1>
    <h1 v-else>Hello, World!</h1>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
  import { ref } from "vue";

  export default {
    setup() {
      const isVisible = ref(true);
      const isGreeting = ref(false);

      function toggleVisibility() {
        isVisible.value = !isVisible.value;
      }

      function setGreeting() {
        isGreeting.value = !isGreeting.value;
      }

      return { isVisible, isGreeting, toggleVisibility, setGreeting };
    },
  };
</script>

在这个例子中，当isVisible为true时，显示 "Hello, Vue3!"，当isGreeting为true时，显示 "Hello, User!"，否则显示 "Hello, World!"。点击按钮可以切换isVisible和isGreeting的值。同时，可以通过调用setGreeting方法来改变isGreeting的值。

注意事项：

• v-else-if必须紧跟在v-if或v-else-if之后。
• 如果需要更复杂的条件判断，可以使用计算属性或者方法。

与v-show的对比

• v-if和v-show都可以实现条件渲染，但它们的实现方式不同。v-if通过改变元素的 CSS 样式（通过display属性）来实现条件渲染，而v-show只是简单地改变元素的 CSS 样式。因此，如果需要频繁地切换显示/隐藏状态，建议使用v-if。