在线答题网站开发,网页制作标题设置步骤,手机制作网页app,西安网站建设熊掌号文章目录 一、条件渲染1.1 概述1.2 演示代码 二、列表渲染2.1 使用 指令 v-for 遍历数组2.2 **使用 指令 v-for 遍历对象** 十、案例作业十一、总结 在前端开发过程中#xff0c;条件和循环是经常被用到的逻辑。vue中封装了自己的组件渲染指令#xff0c;可以更加方便的帮助开… 文章目录 一、条件渲染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
数字化管理平台 Vue3ViteVueRouterPiniaAxiosElementPlus 权限系统-商城 个人博客地址
指令 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
templatediv!-- v-if、v-else-if、v-else 三个条件渲染指令直接操作dom使用场景页面第一次渲染的时候根据条件渲染对应的dom且对DOM操作频率很低的情况下使用 --div v-ifscore 90学生成绩大于90优秀/divdiv v-else-ifscore 80学生成绩大于80良好/divdiv v-else-ifscore 70学生成绩大于70中等/divdiv v-else-ifscore 60学生成绩大于60及格/divdiv v-else学生成绩小于60不及格/div!-- v-if 可以单独多次的使用但是v-else-if、v-else必须要结合v-if去使用 --hrhr!-- v-show 操作的是样式不管条件是否成立都会操作dom --div v-showscore 90学生成绩大于90优秀/divdiv v-showscore 80 score 90学生成绩大于80良好/divdiv v-showscore 70 score 80学生成绩大于70中等/divdiv v-showscore 60 score 70学生成绩大于60及格/divdiv v-showscore 60 score 60学生成绩小于60不及格/div!-- v-show 是一个单独的指令类似于 v-if 单独使用一样每一个条件都是独立。 --hrhrbutton clickflag !flag切换/buttonTransitiondiv classbox v-showflag/div/Transition/div
/templatestyle 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 vueconst 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 指令可以实现数组和对象的列表数据渲染 --ulli :keyindex v-foritem,index in arr{{ item }} ~ {{ index }}/li!-- li{{ arr[1] }}/li --/ulhrbutton clickaddInfo添加一个学生信息/buttonulli :keyitem.idCard v-foritem of stuData编号{{ item.idCard }}姓名{{ item.name }}年龄{{ item.age }}/li/ul
/template
style scoped/style2.2 使用 指令 v-for 遍历对象
语法 v-for “( item, key, index) in obj”
参数 item代表对象中的每一项 key代表每一项对应的键名 index代表每一项对应的索引
script setup
import { ref, reactive } from vueconst obj reactive({idCard: 1,name: 张三,age: 23,
})const addAttr () {console.log(obj)obj.sex 男
}
/script
templateulli :keykey v-foritem,key in obj{{ item }} ~ {{ key }}/li!-- li{{ obj.age }}/li --/ulbrulli v-foritem, key of obj{{ item }} ~ {{ key }}/li/ulbutton click.onceaddAttr增加属性/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 textValuediv :keyitem.text v-ifitem.show {{item.text}}/div
/template且需要注意的是两者混合使用在vue2和vue3中的优先级是不同的。
