Vue v-if 指令

使用 v-if 指令根据 Vue 中的条件创建 HTML 元素要比使用纯 JavaScript 容易得多。

使用 Vue，您只需直接在要有条件创建的 HTML 元素中编写 if 语句。就这么简单。

Vue 中的条件渲染

Vue 中的条件呈现是通过使用 v-if、v-else-if 和 v-else 指令来完成的。

条件呈现是指仅当条件为 true 时才创建HTML元素，即，如果变量为 true，则创建文本 "In stock"，如果变量是 false，则生成文本 "Not in stock"。

实例

根据是否有打字机库存写不同的信息:

<p v-if="typewritersInStock">
  in stock
</p>
<p v-else>
  not in stock
</p>

Vue 的条件语句

A condition, or “if-statement”, is something that is either true or false.一个条件，或者 if 语句，要么是 true，要么是 false。

条件通常是两个值之间的 比较检查，如上面的实例中所示，以查看一个值是否大于另一个值。

• 我们使用比较运算符 , >= 或者 !== 来进行此类检查。
• 比较检查也可以与逻辑运算符（如&&或||）组合使用。
• 请访问我们的 JavaScript 教程页面，了解有关 JavaScript 比较的更多信息。

我们可以根据库存打字机的数量进行比较检查，以确定它们是否有库存:

实例

Use a comparison check to decide whether to write “In stock” or “Not in stock” depending on the number of typewriters in storage.

根据储存的打字机数量，使用比较检查来决定是写 "In stock" 还是 "Not in stock"。

<p v-if="typewritersInStock">
  in stock
</p>
<p v-else>
  not in stock
</p>

条件渲染指令

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

要查看上面显示的所有三个指令的实例，我们可以使用 v-else-if 扩展前面的实例，以便用户看到 'In stock', 'Very few left!' 或 'Out of stock'：

实例

根据存储的打字机数量，使用比较检查来决定是否写 'In stock', 'Very few left!' 或 'Out of stock'。

<p v-if="typewriterCount > 0">
  in stock
</p>
<p v-else>
  not in stock
</p>

使用函数的返回值

我们可以使用函数的 true 或 false 返回值，而不是对 v-if 指令使用比较检查：

实例

如果某个文本包含单词 'pizza'，请创建一个带有适当消息的 <p> 标签。includes() 方法是一个本地 JavaScript 方法，用于检查文本是否包含某些单词。

<div id="app">
  <p v-if="text.includes('pizza')">The text includes the word 'pizza'</p>
  <p v-else>The word 'pizza' is not found in the text</p>
</div>

data() {
  return {
    text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
  }
}

上面的例子可以扩展显示 v-if 也可以创建其他标签，如 <div> 和 <img> 标签：

实例

如果某个文本包含单词 'pizza'，请创建一个带有 pizza 图像的 <div> 标记和一个带有消息的 <p> 标记。includes() 方法是一个本地 JavaScript 方法，用于检查文本是否包含某些单词。

<div id="app">
  <div v-if="text.includes('pizza')">
    <p>The text includes the word 'pizza'</p>
    <img src="img_pizza.svg">
  </div>
  <p v-else>The word 'pizza' is 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 taco, pizza, Thai beef salad, pho soup and tagine.'
      }
    }
  })
  app.mount('#app')
</script>

下面的实例进一步扩展。

实例

如果某个文本包含单词 'pizza' 或 'burrito'，或者没有这些单词，则会创建不同的图像和文本。

<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 taco, pizza, Thai beef salad, pho soup and tagine.'
      }
    }
  })
  app.mount('#app')
</script>

使用 Vue，我们现在可以以比传统 JavaScript 更容易的方式编写在特定条件下创建元素的代码。