条件渲染
v-if、v-else-if、v-else
基本使用
v-if
指令用于根据表达式的真假来条件性地渲染元素,而 v-else-if
和 v-else
则用于添加额外的条件分支。
<template> <div> <p v-if="type === 'A'">Type A</p> <p v-else-if="type === 'B'">Type B</p> <p v-else>Type C</p> </div> </template> <script setup> import { ref } from 'vue'; const type = ref('B'); </script>
注意: v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面,v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面。
使用 <template>
包裹多个元素
如果需要条件渲染多个元素,可以使用 <template>
包裹它们。
<template> <div> <template v-if="type === 'A'"> <p>Content for Type A</p> <span>Another element for Type A</span> </template> <template v-else-if="type === 'B'"> <p>Content for Type B</p> </template> <template v-else> <p>Default Content</p> </template> </div> </template> <script setup> import { ref } from 'vue'; const type = ref('C'); </script>
v-if
和 v-show
的区别
v-show
也是用于条件性地显示或隐藏元素,但与 v-if
有一些不同。
v-if
是真正的条件渲染,当条件为false
时,元素不会被渲染到 DOM 结构中。而v-show
只是通过 CSS 控制元素的显示与隐藏,当条件为false
时,元素仍然在 DOM 中存在,只是被设置为不可见。v-if
适用于在运行时条件不经常改变的情况,因为它会在条件变为true
时添加或移除元素,造成 DOM 操作。而v-show
适用于频繁切换显示和隐藏的情况,因为它只是简单地切换元素的样式。
<template> <div> <p v-if="showElement">This is rendered with v-if</p> <p v-show="showElement">This is rendered with v-show</p> </div> </template> <script setup> import { ref } from 'vue'; const showElement = ref(true) </script>
在上述例子中,两个段落都会在初始渲染时显示,但通过修改 showElement
的值,你可以看到 v-if
会完全移除元素,而 v-show
只是切换了元素的可见性。
如何选择
- 如果你的元素在应用的生命周期中只会被渲染一次或很少改变,使用 v-if 可能更合适,因为它在条件为 false 时会从 DOM 中移除元素,减少了 DOM 操作的频率。
- 如果你的元素需要频繁地显示和隐藏,条件经常变化,可以考虑使用 v-show,因为它不会在条件为 false 时从 DOM 中移除元素,减少了频繁的 DOM 操作。
v-for
v-for
是 Vue 中用于循环渲染元素的指令。它可以用于遍历数组或对象,并为每个元素执行一段模板代码,生成重复的 HTML 结构。
基本用法
遍历数组
<template> <div> <ul> <li v-for="item in items">{{ item }}</li> </ul> </div> </template> <script> export default { data() { return { items: ['Item 1', 'Item 2', 'Item 3'] }; } }; </script>
在上述例子中,v-for
指令遍历 items
数组中的每个元素,并为每个元素渲染一个 <li>
元素。
获取索引值
你也可以通过 (item, index)
的语法获取索引值。
<template> <div> <ul> <li v-for="(item, index) in items">{{ index + 1 }}. {{ item }}</li> </ul> </div> </template> <script setup> import { reactive } from 'vue'; const data = reactive({ items: ['Item 1', 'Item 2', 'Item 3'] }) </script>
遍历对象
除了数组,v-for
也可以用于遍历对象的属性。
<template> <div> <ul> <li v-for="(value, key) in data.user">{{ key }}: {{ value }}</li> </ul> </div> </template> <script setup> import { reactive } from 'vue'; const data = reactive({ user:{ name: 'John', age: 25, occupation: 'Developer' } }) </script>
在上述例子中,v-for
遍历 user
对象的每个属性,为每个属性渲染一个 <li>
元素。
v-for
的特殊用法
遍历数字范围
你可以使用 v-for
遍历一个数字范围。
<template> <div> <ul> <li v-for="n in 5">{{ n }}</li> </ul> </div> </template>
在上述例子中,v-for
会渲染 1 到 5 的数字。
遍历具有特定条件的数组
你可以使用 v-for
遍历具有特定条件的数组。
<template> <div> <ul> <li v-for="item in items.lists" v-if="item.startsWith('Item')">{{ item }}</li> </ul> </div> </template> <script setup> import { reactive } from 'vue'; const items = reactive({ lists:['Item 1', 'Item 2', 'Item 3'] }) </script>
在上述例子中,v-for
遍历 items
数组,但只渲染满足特定条件(以 'Item' 开头)的元素。
v-for
和 key
在使用 v-for
遍历元素时,通常需要为每个迭代的元素指定一个唯一的 key
属性,以便 Vue 能够更高效地更新 DOM。key
应当是每个元素都唯一且稳定的标识符。
<template> <div> <ul> <li v-for="(item, index) in items.lists" :key="index">{{ item }}</li> </ul> </div> </template> <script setup> import { reactive } from 'vue'; const items = reactive({ lists:['Item 1', 'Item 2', 'Item 3'] }) }) </script>
在上述例子中,:key="index"
为每个 <li>
元素指定了一个唯一的 key,通常使用索引作为 key,但在一些特定情况下,可能需要根据具体的数据结构来选择合适的 key。
v-for与v-if
官网说不推荐同时使用