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>