【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中的优先级是不同的。