vue3学习之路 | 条件语句

最新推荐文章于 2024-08-24 07:00:00 发布

一个月只能改一次欧

最新推荐文章于 2024-08-24 07:00:00 发布

阅读量53

点赞数

文章标签：学习 vue.js javascript 前端 ecmascript

本文链接：https://blog.csdn.net/y943711797/article/details/132972046

版权

本文介绍了Vue中的条件渲染指令，包括v-if的基本用法，它是如何根据表达式结果决定是否渲染元素。v-if不仅可以用于单个元素，还可以配合template进行多元素的条件渲染。此外，还讲解了v-else和v-else-if的使用，它们提供了双条件判断和多条件分支的能力。v-show作为v-if的替代，适用于简单的条件切换。文章通过代码示例详细阐述了这些指令的工作原理和应用场景。

摘要由CSDN通过智能技术生成

theme: mk-cute

highlight: atelier-heath-light

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

条件判断

v-if指令初体验

我们在Vue中的条件判断一般使用 v-if 指令，当指令的表达式返回 true 时，该对应的数据才会显示。 - 代码示例： ```html

// 使用v-if指令确定是否显示(插入)

标签

现在条件判断为true

```

template

v-if是一个指令，所以我们必须将它添加到一个元素上，判断元素是否插入到页面中。如果是多个元素，可以包裹在 <template> 元素上，并在上面使用 v-if。 ```html

水果

banana

apple

watermelon

` 元素。 ## v-else指令当我们使用v-if时，有时候会需要双条件判断，因此，我们需要一个v-else指令来多一个渲染模板块。 ```html

// 使用Math的随机数函数(0~1)，使其乘以10，如果大于五则显示v-if部分，反之则显示v-else部分。

随机数大于5显示这里

随机数小于等于5显示这里

<div v-if="types === 'A'">
     A
</div>
<div v-else-if="types=== 'B'">
  B
</div>
<div v-else-if="types === 'C'">
  C
</div>
<div v-else>
 除了ABC以外的字母
</div>