使用 v-if、v-else-if 和 v-else：
<template>
<div>
<p v-if="isTrue">This is true</p>
<p v-else-if="isFalse">This is false</p>
<p v-else>This is the default</p>
<!-- 或者使用 v-show -->
<p v-show="isVisible">This is always visible (v-show)</p>
</div>
</template>
<script>
export default {
data() {
return {
isTrue: true,
isFalse: false,
isVisible: true
};
}
};
</script>
在上述示例中，根据 isTrue 和 isFalse 的值，渲染不同的段落。v-show 也是一种条件渲染的方式，不同的是它不会销毁和重新创建元素，而是通过修改 CSS 样式来隐藏或显示元素。
使用 v-if 与 v-else 的简写形式：
<template>
<div>
<template v-if="isTrue">
<p>This is true</p>
</template>
<template v-else>
<p>This is false</p>
</template>
</div>
</template>
<script>
export default {
data() {
return {
isTrue: true
};
}
};
</script>
你也可以使用 <template> 元素作为条件块的容器，这样可以更加清晰地组织代码。
使用 v-if 与 v-for 结合：
<template>
<div>
<div v-if="items.length > 0">
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</div>
<div v-else>
<p>No items available</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
]
};
}
};
</script>
在这个例子中，根据数组 items 的长度来决定是渲染包含列表的 <div> 还是显示 "No items available" 的 <div>。
以上是 Vue 3.0 中条件渲染的基本用法。条件渲染允许你根据数据的不同状态来显示或隐藏特定的内容，使得视图更具动态性。
转载请注明出处：http://www.zyzy.cn/article/detail/486/Vue 3.0