条件渲染:if 和 v-if 条件渲染可以使用 v-if 指令来实现,它根据提供的条件来控制元素的可见性。v-if 指令接受一个布尔值表达式,如果表达式为 true,则渲染元素,否则将其隐藏。 <template> <
条件渲染:if 和 v-if
条件渲染可以使用 v-if
指令来实现,它根据提供的条件来控制元素的可见性。v-if
指令接受一个布尔值表达式,如果表达式为 true
,则渲染元素,否则将其隐藏。
<template>
<div>
<p v-if="show">显示的文本</p>
<p v-else>隐藏的文本</p>
</div>
</template>
<script>
export default {
data() {
return {
show: true,
};
},
};
</script>
循环:v-for
循环可以通过 v-for
指令来实现,它遍历数据结构并为每个元素渲染模板。v-for
指令接受三个参数:
<template>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: "Item 1" },
{ id: 2, name: "Item 2" },
],
};
},
};
</script>
嵌套条件和循环
条件和循环可以嵌套使用以创建更复杂的行为。例如,您可以使用条件来控制循环的可见性,或者使用循环来渲染具有不同内容的条件块。
<template>
<div v-if="show">
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</div>
<p v-else>没有项目可显示</p>
</template>
<script>
export default {
data() {
return {
show: true,
items: [],
};
},
};
</script>
最佳实践:
:key
属性可以帮助 Vue 追踪元素,从而提高性能。--结束END--
本文标题: 条件与循环的舞步,为 Vue 应用增添交互魅力!
本文链接: https://www.lsjlt.com/news/587250.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0