Vue中的条件渲染和循列表渲染
Posted 飞鹰3995
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
大家还可以扫描二维码，关注我的微信公众号，蜗牛全栈
Vue条件列表渲染
【中文标题】Vue条件列表渲染【英文标题】：Vue conditional list rendering 【发布时间】：2021-11-01 10:14:31 【问题描述】：我正在处理分层导航元素，其中我在数组中的过滤器上有一个 v-for 循环。颜色、大小、性别等过滤器...
由于某些过滤器中的选项数量可能非常多（例如颜色），我想添加一个按钮来显示每个过滤器的更多选项。
我目前有以下功能来显示每个过滤器的更多选项
<div v-if="showMoreFilters === false">
<div
v-for="(attribute, index) in filter.attributes"
:key="attribute.index">
<div class="layered-navigation__item"
v-if="index < filter.facetsettings.nrofshownattributes"
>
<SfFilter
:label="attribute.title"
:count="attribute.nrofresults"
:selected="attribute.isselected"
@change="function(x)>
</SfFilter>
</div>
</div>
</div>
<div v-else>
<div
v-for="attribute in filter.attributes"
:key="attribute.index"
>
<div class="layered-navigation__item">
<SfFilter
:label="attribute.title"
:count="attribute.nrofresults"
:selected="attribute.isselected"
@change="function(x)">
</SfFilter>
</div>
</div>
</div>
</div>
<sfButton @click="showMoreFilters = !showMoreFilters">
Show more filters"
</sfButton>
每个过滤器所需的初始过滤器选项数量在每个过滤器中给出：
filter.facetsettings.nrofshownattributes
然而，问题在于，如果我按下按钮 (showMoreFilters)，所有过滤器都会显示它们的所有选项。不仅仅是我点击的过滤器的选项数组。我该如何解决这个问题？
【问题讨论】：
【参考方案1】：问题是有很多过滤器，但只有一个 showMoreFilters 标志。考虑将showMore 属性添加到每个过滤器的facetsettings 对象...
<div v-if="!filter.facetsettings.showMore">
...
<sfButton @click="filter.facetsettings.showMore != filter.facetsettings.showMore">
Show more of just this filter"
</sfButton>
【讨论】：
以上是关于Vue中的条件渲染和循列表渲染的主要内容，如果未能解决你的问题，请参考以下文章