文章目录
- 一、条件渲染
- 1.1 概述
- 1.2 演示代码
- 二、列表渲染
- 2.1 使用 指令 v-for 遍历数组
- 2.2 **使用 指令 v-for 遍历对象**
- 十、案例作业
- 十一、总结
在前端开发过程中，条件和循环是经常被用到的逻辑。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中的优先级是不同的。
