Vue中的条件渲染和循列表渲染
小编之前更新过相关的内容，之前对Vue3没有了解那么深入，今天小编系统的将这两个常用的渲染方式统一整理到这篇文章中。
一、条件渲染。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data(){
return {
show: true,
conditionOne:true,
conditionTwo:false
}
},
// 只有show为true的时候，展示该div
// v-if为false的时候，直接移除DOM
// v-show通过对DOM元素通过样式display来控制是否显示DOM
// 频繁控制DOM使用v-show性能更高，不涉及DOM操作
// 与v-if对应的还有一个v-else 上下两行要挨在一起
// v-else-if
template:`<div v-if="show">Hello World</div>
<div v-if="conditionOne">Hello World</div>
<div v-else>Hello World</div>
<div v-if="conditionOne">ifOne</div>
<div v-else-if="conditionTwo">elseTwo</div>
<div v-else>else</div>
<div v-show="show">Hello World</div>`
})
const vm = app.mount("#root")
</script>
</body>
</html>
二、列表渲染
1、数组列表渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data(){
return {
listArray: ['item1','item2','item3'],
}
},
methods:{
handleBtnClick(){
// 方法一、数组的变更函数
// pop删除数组内最后一个元素
// shift删除数组内第一个元素
// unshift在数组第一项增加
// splice变更数组内容
// sort排序
// reverse将数组掉个
this.listArray.push('Hello Vue3')
// 方法二、直接改变数组
this.listArray = ['1','2','3']
this.listArray = ['1','2','3'].concat('4')
this.listArray.filter((v) => {
return v === '3'
})
// 方法三、更新数组内指定元素
this.listArray[2] = 'hanmeimei'
}
},
// 对于数组，第一个参数item代表的是内容本身，第二个参数index是数组的下标
// 对于数组的渲染，在像数组内push元素的时候，尽可能展示新增的元素，原来存在的数据可以不再次渲染，这个时候产生了循环时候的key，建议使用v-for的时候，增加元素的key
template:`<div v-for="(item,index) in listArray" :key="index">{{ item }}--{{ index }}</div>
<button @click="handleBtnClick"></button>`
})
const vm = app.mount("#root")
</script>
</body>
</html>
2、对象列表渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data(){
return {
listObj: {
firstName: 'li',
lastName: 'lei',
job: 'teacher'
}
}
},
methods:{
handleBtnClick(){
// 直接像对象添加属性。在之前版本会出现问题，需要调用this.$nextClick或者this.$set进行更新，新版本才不会出现问题
this.listObj.age = 100
}
},
// 对于对象，第一个参数value代表的是value，第二个参数表示key，第三个参数表示的下标
template:`<div v-for="(value,key,index) in listObj" v-if="key !== 'lastName'">{{ value }}--{{ item }}--{{ index }}</div>
<button @click="handleBtnClick"></button>`
})
const vm = app.mount("#root")
</script>
</body>
</html>
3、综合实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data(){
return {
listArray: ['item1','item2','item3'],
listObj: {
firstName: 'li',
lastName: 'lei',
job: 'teacher'
}
}
},
methods:{
handleBtnClick(){
// 方法一、数组的变更函数
// pop删除数组内最后一个元素
// shift删除数组内第一个元素
// unshift在数组第一项增加
// splice变更数组内容
// sort排序
// reverse将数组掉个
this.listArray.push('Hello Vue3')
// 方法二、直接改变数组
this.listArray = ['1','2','3']
this.listArray = ['1','2','3'].concat('4')
this.listArray.filter((v) => {
return v === '3'
})
// 方法三、更新数组内指定元素
this.listArray[2] = 'hanmeimei'
// 直接像对象添加属性。在之前版本会出现问题，因为数组和对象都是引用数据类型。需要调用this.$nextClick或者this.$set进行更新，新版本才不会出现问题
this.listObj.age = 100
}
},
// 对于数组，第一个参数item代表的是内容本身，第二个参数index是数组的下标
// 对于对象，第一个参数value代表的是value，第二个参数表示key，第三个参数表示的下标
// 对于数组的渲染，在像数组内push元素的时候，尽可能展示新增的元素，原来存在的数据可以不再次渲染，这个时候产生了循环时候的key，建议使用v-for的时候，增加元素的key
// v-for和v-if同时作用在一个标签的时候，v-for的优先级高于v-if。解决方案可以在DOM内部添加DOM元素。为了DOM保持一直的话，可以使用<template>占位符，类似React中的<Fragement>
template:`<div v-for="(item,index) in listArray" :key="index">{{ item }}--{{ index }}</div>
<div v-for="(value,key,index) in listObj" v-if="key !== 'lastName'">{{ value }}--{{ item }}--{{ index }}</div>
<button @click="handleBtnClick"></button>`
})
const vm = app.mount("#root")
</script>
</body>
</html>
大家还可以扫描二维码，关注我的微信公众号，蜗牛全栈
浙公网安备 33010602011771号