文章目录
- 一、条件渲染
- 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中的优先级是不同的。