Vue v-else 指令

实例

当以上所有条件都为 'false' 时，使用 v-else 指令创建一个 <div> 元素。

<p v-if="word === 'apple'">The word is 'apple'.</p>
<p v-else-if="word === 'pizza'">The word is 'pizza'</p>
<div v-else>
  <img src="/img_question.svg" alt="question mark">
  <p>The word is not 'apple', and it is not 'pizza'</p>
</div>

定义与用法

v-else 指令用于在 if 语句中上述所有条件的计算结果均为 'false' 的情况下呈现元素。

v-else 指令只能在带有 v-if 或 v-else-if 的元素之后使用。

使用 v-else 切换元素时:

• 当元素进入和离开 DOM 时，我们可以使用内置的 <Transition> 组件来设置动画。
• 会触发生命周期钩子，如 'mounted' 和 'unmounted'。

条件呈现指令

此概述描述了用于条件呈现的不同 Vue 指令是如何一起使用的。

更多实例

实例 1

当打字机计数为 0 时，使用 v-else 写 "Not in stock"（没有库存）。

<p v-if="typewriterCount>3">
  In stock
</p>
<p v-else-if="typewriterCount>0">
  Very few left!
</p>
<p v-else>
  Not in stock
</p>

实例 2

当句子中不包含 'pizza' 或 'burrito' 时，使用 v-else 显示特定文本。

<div id="app">
  <div v-if="text.includes('pizza')">
    <p>The text includes the word 'pizza'</p>
    <img src="img_pizza.svg">
  </div>
  <div v-else-if="text.includes('burrito')">
    <p>The text includes the word 'burrito', but not 'pizza'</p>
    <img src="img_burrito.svg">
  </div>
  <p v-else>The words 'pizza' or 'burrito' are not found in the text</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        text: 'I like Thai beef salad, pho soup and tagine.'
      }
    }
  })
  app.mount('#app')
</script>