【Vue】条件判断_循环

1 条件判断v-if、v-else-if、v-else

1.1 简介

• 在Vue中，v-if、v-else-if、v-else 是用于条件渲染的指令。
• 它们根据表达式的真假值来有条件地渲染元素。
• 这些指令对于控制页面上不同内容的显示非常有用，特别是在需要根据数据动态显示不同视图时。
• v-if：根据表达式的真假值来条件性地渲染元素。
• v-else-if：作为v-if的“else if”块，用于检查多个条件。
• v-else：为v-if/v-else-if提供“else”块，当所有前面的条件都不满足时渲染。

1.2使用

1、v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值(truthy value)时渲染。

示例：

<template>  
  <div>  
    <p v-if="score >= 90">优秀</p>  
    <p v-else-if="score >= 60">及格</p>  
    <p v-else>不及格</p>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      score: 85 // 假设这是学生的分数  
    }  
  }  
}  
</script>

2、v-else-if

v-else-if，顾名思义，用作v-if的“else if”块。你可以链式地使用多个v-else-if来检查多个条件。

注意：v-else-if和v-else必须紧跟在v-if或v-else-if元素之后，否则它们将不会被识别。

3、v-else

v-else指令为v-if、v-else-if提供“else”块。v-else元素会渲染出来，如果前面的v-if和v-else-if条件都不满足。

2 循环v-for

2.1 简介

• Vue.js 中的 v-for 指令用于基于一个数组或对象来渲染一个列表。
• 它可以使用在 <template>、<div>、<span> 或其他任何元素上，并且可以重复渲染该元素或模板块多次。
• v-for 指令需要一个表达式，该表达式声明了如何遍历数组或对象。

2.2基本语法

对于数组：

items 是要遍历的数组，item 是数组元素的一个别名（可以使用任何名称），index 是当前元素的索引（也是可选的）。:key="index" 是一个好的实践，用于给每个循环的元素提供一个唯一的 key，以帮助 Vue 跟踪每个节点的身份，从而重用和重新排序现有元素。

<div v-for="(item, index) in items" :key="index">  
  {{ item.text }}  
</div>

对于对象：

这里，object 是要遍历的对象，value 是对象的属性值，key 是对象的键名。

<div v-for="(value, key) in object" :key="key">  
  {{ key }}: {{ value }}  
</div>