码农教程 - 一技在手,衣食无忧! tools

Vuev-if指令

❮ 上一节 下一节 ❯

根据 Vue 中的条件创建 HTML 元素要容易得多v-if指令比普通 JavaScript 更有效。

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

Vue 中的条件渲染

条件渲染在 Vue 中是通过使用v-if,v-else-if和v-else指令。

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

示例

根据是否有库存打字机写入不同的消息：

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

<p v-else>
  not in stock
</p>
亲自试一试 »

Vue 中的条件

条件或 "if-statement" 可以是true或者false。

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

  • 我们用比较运算符喜欢<,>=或者!==进行此类检查。

  • 比较检查也可以与逻辑运算符例如&&或者||。

  • 去我们的JavaScript 教程页面以了解有关 JavaScript 比较的更多信息。

我们可以使用存储中的打字机数量进行比较检查来确定它们是否有库存：

示例

使用比较检查根据存储中的打字机数量决定是否写入 "In stock" 或 "Not in stock"。

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

<p v-else>
  not in stock
</p>
亲自试一试 »

条件渲染指令

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

指令 细节
v-if 可单独使用，或与v-else-if和/或v-else。如果里面的条件v-if是真的'，v-else-if或者v-else不予考虑。
v-else-if 必须在之后使用v-if或其他v-else-if。如果里面的条件v-else-if是真的'，v-else-if或者v-else之后的内容不予考虑。
v-else 如果 if 语句的第一部分为 false，则这部分将会发生。必须放在 if 语句的最末尾，之后v-if和v-else-if。

要查看包含上面显示的所有三个指令的示例，我们可以使用以下命令扩展前面的示例v-else-if这样用户就会看到“有货”、“剩余很少！”或“缺货”：

示例

使用比较检查根据存储中打字机的数量决定是否写入"In stock"、"Very few left!" 或"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>
亲自试一试 »

使用函数的返回值

而不是使用与v-if指令，我们可以使用函数的“true”或“false”返回值：

示例

如果某个文本包含单词“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”，请创建一个包含披萨图片的 <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 更简单的方式在特定条件下创建元素。

Vue练习

通过练习测试一下

练习:

填写缺失的部分，以便 Vue 根据“lightOn”布尔数据属性为我们切换下面的 <div> 标签的可见性。

<div id="app">
  <p ="typewritersInStock">
    in stock
  </p>
  <p >
    not in stock
  </p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
  data() {
    return {
      typewritersInStock: true
    }
  }
})
app.mount('#app')
</script>

开始练习

❮ 上一节 下一节 ❯