03.vue3基础语法（二）（v-if和v-for）

最新推荐文章于 2024-06-24 09:08:05 发布

phoebemeng

最新推荐文章于 2024-06-24 09:08:05 发布

阅读量3.2k

点赞数 1

分类专栏： vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/phoebemeng/article/details/126300220

版权

本文详细介绍了Vue3中的条件渲染和列表渲染。主要内容包括v-if、v-else、v-else-if的使用，v-if与v-show的区别，以及v-for的基本操作和在列表渲染中的应用。此外，还探讨了v-for与template的结合使用，以及key属性在列表渲染中的重要性。

摘要由CSDN通过智能技术生成

条件渲染

在某些情况下，需要根据当前条件判断决定某些元素或者组件是否渲染，这时候就需要进行条件判断了。
vue提供了以下指令来进行条件判断：

v-if
v-else
v-else-if
v-show

<!-- 如果score>90则显示这个标签及其内容 -->
<h5 v-if="score >90">{
  {message}}</h5>

<template id="my-app">
			<!--根据输入的成绩显示 v-model双向绑定 -->
			<input type="text" v-model="score">
			<h5 v-if="score >90">优秀</h5>
			<h5 v-else-if="score >70">良好</h5>
			<h5 v-else-if="score >60">及格</h5>
			<h5 v-else>不及格,继续努力</h5>
		</template>

v-if的渲染原理：
v-if是惰性的；当条件为false时，其判断内容完全不会被渲染或者会被销毁掉；当判断条件为true时，才会被真正渲染条件块中的内容。
在这里插入图片描述 </