Vue3 | 条件渲染 与 列表循环渲染
完整原文地址见简书https://cloud.tencent.com/developer/article/1797249
本文内容提要
条件渲染
- **`v-if`****与****`v-show`****控制渲染的机制的区别**
- **`v-if`****与****`v-show`****各自的适用场景**
- **`v-if`****与****`v-else`****的配合 控制渲染**
- **`v-if`****、****`v-else-if`****与****`v-else`****的配合 控制渲染**- **`v-for`****例程（数组方式）**
- **`v-for`****例程（Object方式 --- 注意参数顺序！！！）**
- **注意使用****`Key值`****优化****`v-for`****的性能**
- **通过数组的变更函数 更新渲染列表UI**
- **通过 直接用****`新数组`****替换更新****`原数组`** **更新渲染列表UI**
- **通过改变 数组内容（元素） 更新渲染列表UI**
- **循环Object对象，增加Object对象内容，渲染更新UI**
- **使用****`v-for`****遍历一个数字**
- **特性“****`v-for`****的优先级高于****`v-if`****”，其引发的相关问题 及其 规避方法** - **案例**
- **解决方案**
- **使用****`<template>`****UI占位符进行优化**条件渲染
v-if**与**v-show**控制渲染的机制的区别**
当它们的参数值是**true**时，毫无疑问对应的组件便是展示的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="heheApp"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
show: true
}
},
template: `
<div v-if="show">luelueluelielielie</div>
<div v-show="show">Bye Bye！！！</div>`
});
const vm = app.mount('#heheApp');
</script>
</html>效果：
当它们的参数值是**false**时，
v-if**通过** 直接暴力去除**对应DOM组件的形式 “隐藏”组件，**
而**v-show**则通过**style="display: none;"**样式的配置 隐藏组件：
<script>
const app = Vue.createApp({
data() {
return {
show: false
}
},
template: `
<div v-if="show">luelueluelielielie</div>
<div v-show="show">Bye Bye！！！</div>`
});
const vm = app.mount('#heheApp');
</script>效果：
v-if与v-show各自的适用场景
基于以上的隐藏组件的机制，
频率较低地隐藏组件的场景，两者都差不多，
不想占用过多DOM资源的话，可以考虑使用v-if;
v-show适用于频率较高的隐藏组件的场景；
v-if与v-else的配合 控制渲染
上例程：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="heheApp"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
show: true
}
},
template: `
<div v-if="show">luelueluelielielie</div>
<div v-if="show">if text</div>
<div v-else>else text</div>
<div v-show="show">Bye Bye！！！</div>`
});
const vm = app.mount('#heheApp');
</script>
</html>首先，注意**v-if**与**v-else**两个指令修饰的两个组件
一定要是成对出现的，放在一起前后两行衔接的，
不然容易出错或报错；
接着，**v-if**与**v-else**两个指令修饰的两个组件，
同一时间只会出现一个，
由**v-if**指定绑定的字段，**v-else**不需要指定；
字段为**true**时，**v-if**修饰的组件显示，
字段为**false**时，**v-else**修饰的组件显示：
v-if、v-else-if与v-else的配合 控制渲染
即如普通编程的逻辑，
v-if**绑定字段为true时候，只显示**v-if**修饰的组件，**
否则，
v-else-if**绑定字段为true时候，只显示**v-else-if**修饰的组件，**
再否则，
只显示**v-else**修饰的组件；
<script>
const app = Vue.createApp({
data() {
return {
show: false,
conditionOne: false,
conditionTwo: true
}
},
template: `
<div v-if="show">luelueluelielielie</div>
<div v-if="conditionOne">if text</div>
<div v-else-if="conditionTwo">else-if text</div>
<div v-else>else text</div>
<div v-show="show">Bye Bye！！！</div>`
});
const vm = app.mount('#heheApp');
</script>效果图：
列表循环渲染
v-for**例程（数组方式）：**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="heheApp"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
listArray: ['Otoman', 'Wang', 'program']
}
},
template: `
<div>
<div v-for="(item, index) in listArray">
{{item}} --- {{index}}
</div>
</div>`
});
const vm = app.mount('#heheApp');
</script>
</html>效果图：
v-for**例程（Object方式 --- 注意参数顺序！！！）：**
<script>
const app = Vue.createApp({
data() {
return {
listArray: ['Otoman', 'Wang', 'programmer'],
listObject: {
firstName: 'Otoman',
lastName: 'wang',
job: 'programmer'
}
}
},
template: `
<div>
<div v-for="(value, key, index) in listObject">
{{value}} --- {{key}} --- {{index}}
</div>
</div>`
});
const vm = app.mount('#heheApp');
</script>效果图：
注意使用Key值优化v-for的性能
当使用**v-for**做循环渲染，尽量加一个每一项都唯一的**Key值**，
这样下次新增元素的时候，
Vue底层**发现 其**Key值**在**数据更新前后**都没变的**DOM项**，**
就会直接**复用**这个**DOM项**，而不用**重建**这个**DOM项**，
达到**优化性能**的目的；
<script>
const app = Vue.createApp({
data() {
return {
listArray: ['Otoman', 'Wang', 'programmer'],
listObject: {
firstName: 'Otoman',
lastName: 'wang',
job: 'programmer'
}
}
},
template: `
<div>
<div v-for="(item, index) in listArray" :key="index">
{{item}} --- {{index}}
</div>
</div>`
});
const vm = app.mount('#heheApp');
</script>通过数组的变更函数 更新渲染列表UI
本质其实就是借助 原生JS数组的 API对数据进行更新，
再借助**Vue**的**数据与UI**的**双向绑定特性**，
完成对UI的**更新渲染**：
<script>
const app = Vue.createApp({
data() {
return {
listArray: ['Otoman', 'Wang', 'programmer'],
listObject: {
firstName: 'Otoman',
lastName: 'wang',
job: 'programmer'
}
}
},
methods: {
handleAddBtnClick() {
this.listArray.push('hello');
},
handleDeleteBtnClick() {
this.listArray.pop();
},
handleShiftBtnClick() {
this.listArray.shift();
},
handleUnShiftBtnClick() {
this.listArray.unshift('hello');
},
handleSpliceBtnClick() {
//实际上就是 JS数组 原生的API的用法
this.listArray.splice(2,0,'lalala');
// this.listArray.splice(2,1,'lalala');
// this.listArray.splice(2,3,'lalala');
},
handleUnSortBtnClick() {
this.listArray.sort();
},
handleReverseBtnClick() {
this.listArray.reverse();
}
},
template: `
<div>
<div v-for="(item, index) in listArray" :key="index">
{{item}} --- {{index}}
</div>
<div>
<button @click="handleAddBtnClick">在末尾新增节点</button>
<button @click="handleDeleteBtnClick">删除末尾节点</button>
</div>
<div>
<button @click="handleShiftBtnClick">删除开头的节点</button>
<button @click="handleUnShiftBtnClick">在开头新增节点</button>
</div>
<div>
<button @click="handleSpliceBtnClick">插入或替换部分的节点</button>
<button @click="handleSortBtnClick">排序节点</button>
<button @click="handleReverseBtnClick">反转节点</button>
</div>
</div>`
});
const vm = app.mount('#heheApp');
</script>效果图如下，
这里由于功能比较繁多而简单，就不做详细操作了：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录