Vue3基础之v-if条件与 v-for循环
条件渲染
v-if、v-else-if、v-else
基本使用
v-if 指令用于根据表达式的真假来条件性地渲染元素，而 v-else-if 和 v-else 则用于添加额外的条件分支。
<template>
<div>
<p v-if="type === 'A'">Type Ap>
<p v-else-if="type === 'B'">Type Bp>
<p v-else>Type Cp>
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>
<div>
<template v-if="type === 'A'">
<p>Content for Type Ap>
<span>Another element for Type Aspan>
template>
<template v-else-if="type === 'B'">
<p>Content for Type Bp>
template>
<template v-else>
<p>Default Contentp>
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-ifp>
<p v-show="showElement">This is rendered with v-showp>
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 数组中的每个元素，并为每个元素渲染一个
元素。
获取索引值
你也可以通过 (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 对象的每个属性，为每个属性渲染一个
元素。
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" 为每个
元素指定了一个唯一的 key，通常使用索引作为 key，但在一些特定情况下，可能需要根据具体的数据结构来选择合适的 key。
v-for与v-if
官网说不推荐同时使用
你可能感兴趣的:(vue.js,javascript,前端,v-if,v-for)
如果需要条件渲染多个元素，可以使用 在上述例子中，两个段落都会在初始渲染时显示，但通过修改 如何选择 如果你的元素在应用的生命周期中只会被渲染一次或很少改变，使用 v-if 可能更合适，因为它在条件为 false 时会从 DOM 中移除元素，减少了 DOM 操作的频率。 如果你的元素需要频繁地显示和隐藏，条件经常变化，可以考虑使用 v-show，因为它不会在条件为 false 时从 DOM 中移除元素，减少了频繁的 DOM 操作。 在上述例子中， 你也可以通过 除了数组， 在上述例子中， 你可以使用 在上述例子中， 你可以使用 在上述例子中， 在使用 在上述例子中， 官网说不推荐同时使用 包裹它们。
<template>
<div>
<template v-if="type === 'A'">
<p>Content for Type Ap>
<span>Another element for Type Aspan>
template>
<template v-else-if="type === 'B'">
<p>Content for Type Bp>
template>
<template v-else>
<p>Default Contentp>
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-ifp>
<p v-show="showElement">This is rendered with v-showp>
div>
template>
<script setup>
import { ref } from 'vue';
const showElement = ref(true)
script>
showElement 的值，你可以看到 v-if 会完全移除元素，而 v-show 只是切换了元素的可见性。
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 数组中的每个元素，并为每个元素渲染一个 获取索引值
(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 对象的每个属性，为每个属性渲染一个 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 和 keyv-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" 为每个 v-for与v-if
你可能感兴趣的:(vue.js,javascript,前端,v-if,v-for)