【Vue3 知识第五讲】条件渲染、列表渲染知识详解

在前端开发过程中，条件和循环是经常被用到的逻辑。vue中封装了自己的组件渲染指令，可以更加方便的帮助开发者快速完成页面的布局。从而使得开发这个将更多的经历放在业务逻辑开发上面。下面我们就来讲一下这相关的几个指令的应用。

一、条件渲染

1.1 概述

指令 v-if、v-else-if 、v-else

​ 多个元素，通过条件判断动态的向DOM树内添加或者删除DOM元素，操作的是DOM结构

​ 应用场景：渲染后变化比较少，建议使用 v-if

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
权限系统-商城
个人博客地址

指令 v-show

​ 通过设置样式 display:none; 控制元素的隐藏和显示，此时元素已经渲染到页面，操作的是样式

​ 应用场景：渲染后变化比较多，从性能优化的角度来讲建议使用 v-show

1.2 演示代码

<script setup>
import { ref } from "vue"
const score = 80;
const obj = {name: "Jack",age: 23
}
let flag = ref(true)
</script>
<template><div><!-- v-if、v-else-if、v-else 三个条件渲染指令，直接操作dom；使用场景：页面第一次渲染的时候根据条件渲染对应的dom，且对DOM操作频率很低的情况下使用 --><div v-if="score >= 90">学生成绩大于90，优秀</div><div v-else-if="score >= 80">学生成绩大于80，良好</div><div v-else-if="score >= 70">学生成绩大于70，中等</div><div v-else-if="score >= 60">学生成绩大于60，及格</div><div v-else>学生成绩小于60，不及格</div><!-- v-if 可以单独，多次的使用；但是v-else-if、v-else必须要结合v-if去使用 --><hr><hr><!-- v-show 操作的是样式，不管条件是否成立，都会操作dom --><div v-show="score >= 90">学生成绩大于90，优秀</div><div v-show="score >= 80 && score < 90">学生成绩大于80，良好</div><div v-show="score >= 70 && score < 80">学生成绩大于70，中等</div><div v-show="score >= 60 && score < 70">学生成绩大于60，及格</div><div v-show="score <= 60 && score < 60">学生成绩小于60，不及格</div><!-- v-show 是一个单独的指令，类似于 v-if 单独使用一样，每一个条件都是独立。 --><hr><hr><button @click="flag = !flag">切换</button><Transition><div class="box" v-show="flag"></div></Transition></div>
</template><style scoped>
.box {height: 300px;background-color: blue;
}/* 下面我们会解释这些 class 是做什么的 */
.v-enter-active,
.v-leave-active {transition: opacity 0.5s ease;
}.v-enter-from,
.v-leave-to {opacity: 0;
}
</style>

二、列表渲染

2.1 使用 指令 v-for 遍历数组

语法 v-for = " (item, index) in arr "

参数 item代表数组中的每一项 index 代表每一项所对应的索引

key的作用 为了高效更新虚拟DOM，帮助Vue快速区分不同元素，用 key 来给每个节点做唯一标识

<script setup>
import { ref, reactive } from 'vue'const arr = ["banana", "orange", "apple", "kiwi fruit", 'peal']const stuData = ref([{idCard: 1,name: "Jack",age: 23
}, {idCard: 2,name: "Lucy",age: 18
}, {idCard: 3,name: "David",age: 26
}])const addInfo = () => {console.log(stuData.value.length)stuData.value.push({idCard: stuData.value.length + 1,name:"luosi",age:23})
}
</script>
<template><!-- v-for 指令可以实现数组和对象的列表数据渲染 --><ul><li :key="index" v-for="item,index in arr">{{ item }} ~ {{ index }}</li><!-- <li>{{ arr[1] }}</li> --></ul><hr><button @click="addInfo">添加一个学生信息</button><ul><li :key="item.idCard" v-for="item of stuData">编号：{{ item.idCard }}姓名：{{ item.name }}年龄：{{ item.age }}</li></ul>
</template>
<style scoped></style>

2.2 使用 指令 v-for 遍历对象

语法 v-for = “( item, key, index) in obj”

参数 item代表对象中的每一项 key代表每一项对应的键名 index代表每一项对应的索引

<script setup>
import { ref, reactive } from 'vue'const obj = reactive({idCard: 1,name: "张三",age: 23,
})const addAttr = () => {console.log(obj)obj.sex = "男"
}
</script>
<template><ul><li :key="key" v-for="item,key in obj">{{ item }} ~ {{ key }}</li><!-- <li>{{ obj.age }}</li> --></ul><br><ul><li v-for="item, key of obj">{{ item }} ~ {{ key }}</li></ul><button @click.once="addAttr">增加属性</button>
</template>
<style scoped></style>

注：2.x 版本中在一个元素上同时使用 v-if 和 v-for 时，v-for 会优先作用。而3.x 版本中 v-if 总是优先于 v-for 生效。由于语法上存在歧义，建议避免在同一元素上同时使用两者。

十、案例作业

十一、总结

v-if指令 作为一个条件渲染，当他为true的时候才会渲染出当前的节点

v-for指令基于一个数组来渲染列表 ，v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名 在v-for的时候都会被要求设置Key值，而且每一个Key值都是独一无二的。

但在使用两种类型的指令时需要注意：

• 永远不要把 v-if 和 v-for 同时用在一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）
• 如果避免出现这种情况，则在外层嵌套 template （页面渲染不生成dom节点），再这一层进行 v-if 判断，然后再内部进行 v-for 循环

<template v-for="(item) in textValue"><div  :key="item.text" v-if="item.show" >{{item.text}}</div>
</template>

且需要注意的是：两者混合使用，在vue2和vue3中的优先级是不同的。