Vue條件渲染與列表渲染
更新時間：2022年05月27日 09:37:16 作者：??奔跑吧雞翅????
這篇文章主要介紹了Vue條件渲染與列表渲染，條件渲染包括v-if、v-show等內(nèi)容，文章對條件渲染及列表渲染介紹詳細，具有一定的參考價值，需要的小伙伴可以參考一下
一、Vue條件渲染
v-show
<!--使用v-show做條件渲染-->
<h1 v-show="false">{{name}}</h1>
<!--或-->
<h1 v-show="1===3">{{name}}</h1>
舉例1
<div id="root">
<h2>當(dāng)前n值是{{n}}</h2>
<button @click="n++">點我n+1</button>
<div v-show="n===1">2020</div>
<div v-show="n===2">2021</div>
<div v-show="n===3">2022</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
//創(chuàng)建vue實例
new Vue({
el: "#root",
data: {
name: "你好",
n: 0
}
})
</script>v-if
<!--使用v-if做條件渲染-->
<h1 v-if="false">{{name}}</h1>
<h1 v-if="1===1">{{name}}</h1>
如果切換頻率高用 v-show，切換頻率低用 v-if
v-else-if
舉例2
<div id="root">
<h2>當(dāng)前n值是{{n}}</h2>
<button @click="n++">點我n+1</button>
<div v-if="n===1">2020</div>
<div v-else-if="n===1">2021</div>
<div v-else-if="n===3">2022</div>
</div>
可以看到 v-if、v-else-if 的邏輯 和 if-else if 的邏輯是相同的，一個符合下邊的代碼就不執(zhí)行了
v-else
<div id="root">
<h2>當(dāng)前n值是{{n}}</h2>
<button @click="n++">點我n+1</button>
<div v-if="n===1">2020</div>
<div v-else-if="n===1">2021</div>
<div v-else-if="n===2">2022</div>
<div v-else>某年</div>
</div>v-if 與 template
<div id="root">
<h2>當(dāng)前n值是{{n}}</h2>
<button @click="n++">點我n+1</button>
<template v-if="n===1">
<h2>2020</h2>
<h2>2021</h2>
<h2>2022</h2>
</template>
</div>小結(jié)
條件渲染
1、v-if
寫法：
(1).v-if="表達式”
(2).v-else-if="表達式"
(3).v-else="表達式"
- 適用于：切換頻率較低的場景
- 特點：不展示的DOM元素直接被移除
- 注意:
v-if可以和v-else-if、v-else一起使用，但要求結(jié)構(gòu)不能被"打斷”
2、v-show
- 寫法：
v-show="表達式" - 適用于：切換頻率較高的場景
- 特點：不展示的DOM元素未被移除，僅僅是使用樣式隱藏掉
3.備注:
用v-if的時，元素可能無法獲取到，而使用v-show一定可以獲取到
用v-if的時，元素可能無法獲取到，而使用v-show一定可以獲取到
二、列表渲染
v-show
基本使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue初識</title>
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="root">
<!--遍歷數(shù)組-->
<h2>人員列表(遍歷數(shù)組)</h2>
<ul>
<li v-for="(p,index) in persons" :key="index">
{{p.name}}--{{p.age}}
</li>
</ul>
<!--遍歷對象-->
<h2>貓咪信息(遍歷對象)</h2>
<ul>
<li v-for="(value,k) in cat" :key="k">
{{k}}:{{value}}
</li>
</ul>
<!--遍歷字符串-->
<h2>遍歷字符串(用的少)</h2>
<ul>
<li v-for="(char,index) in str" :key="k">
{{char}}-{{index}}
</li>
</ul>
<!--遍歷指定次數(shù)-->
<h2>遍歷指定次數(shù)(用的少)</h2>
<ul>
<li v-for="(index,number) in 5" :key="index">
{{index}}-{{number}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
//創(chuàng)建vue實例
new Vue({
el: "#root",
data: {
persons:[
{id:1,name:"張三",age:18},
{id:2,name:"李四",age:19},
{id:3,name:"王五",age:20},
],
cat:{
name:"王大喵",
age:2,
color:"灰色"
},
str:"hello"
}
})
</script>
</body>
</html>v-for指令
- 1、用于展示列表數(shù)據(jù)
- 2、語法：
v-for="(item，index) in xxx" :key="yyy" - 3、可遍歷：數(shù)組、對象、字符串（用的很少)、指定次數(shù)（用的很少)
key的作用
如果用 index 做 key，循環(huán)遍歷 persons，同時在后邊增加 input，內(nèi)容復(fù)制展示的信息，然后增加一個按鈕，點擊在列表前增加一個老劉
<div id="root">
<!--遍歷數(shù)組-->
<h2>人員列表(遍歷數(shù)組)</h2>
<ul>
<li v-for="(p,index) in persons" :key="index">
{{p.name}}--{{p.age}}
<input type="text"/>
</li>
</ul>
<button @click="add">增加一個老劉</button>
</div><script type="text/javascript">
Vue.config.productionTip = false
//創(chuàng)建vue實例
new Vue({
el: "#root",
data: {
persons:[
{id:1,name:"張三",age:18},
{id:2,name:"李四",age:19},
{id:3,name:"王五",age:20},
]
},
methods:{
add(){
const p = {id:4,name:"老劉",age:40}
this.persons.unshift(p)
}
}
})
</script>
錯亂原因：
當(dāng) id 做為 key
<ul>
<li v-for="(p,index) in persons" :key="p.id">
{{p.name}}--{{p.age}}
<input type="text"/>
</li>
</ul>
react、vue中的key有什么作用?（key的內(nèi)部原理)
1、虛擬DOM中key的作用
key 是虛擬DOM對象的標識，當(dāng)數(shù)據(jù)發(fā)生變化時，Vue會根據(jù)【新數(shù)據(jù)】生成【新的虛擬DON】，隨后Vue進行【新虛擬DOM】與【舊虛擬DOM】的差異比較，比較規(guī)則如下：
2、對比規(guī)則
(1).舊虛擬DOM中找到了與新虛擬DOM相同的key：
- ①若虛擬DOM中內(nèi)容沒變直，接使用之前的真實DOM
- ②若虛擬DOM中內(nèi)容變了，則生成新的真實DOM，隨后替換掉頁面中之前的真實DON
(2).舊虛擬DOM中未找到與新虛擬DOM相同的 key：
- 創(chuàng)建新的真實DOM，隨后渲染到到頁面
3、用index作為key可能會引發(fā)的問題
- (1).對數(shù)據(jù)進行：逆序添加、逆序刪除等破壞順序操作，會產(chǎn)生沒有必要的真實DOM更新(界面效果沒問題，但效率低）
- (2).如果結(jié)構(gòu)中還包含輸入類的DOM，會產(chǎn)生錯誤DOM更新（界面有問題）
4、開發(fā)中如何選擇key?
- (1).最好使用每條數(shù)據(jù)的唯一標識作為key，比如id、手機號、身份證號、學(xué)號等唯一值
- (2).如果不存在對數(shù)據(jù)的逆序添加、逆序刪除等破壞順序操作，僅用于渲染列表用于展示,使用index作為key是沒有問題的
到此這篇關(guān)于Vue條件渲染與列表渲染的文章就介紹到這了,更多相關(guān)Vue渲染內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue中使用animate.css實現(xiàn)炫酷動畫效果
這篇文章主要介紹了vue中使用animate.css實現(xiàn)動畫效果,我們使用它，只需要寫很少的代碼，就可以實現(xiàn)非常炫酷的動畫效果，感興趣的朋友跟隨小編一起看看吧2022-04-04
這篇文章主要介紹了vue中實現(xiàn)高德定位功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
vue如何實現(xiàn)el-select下拉選項的懶加載
這篇文章主要介紹了vue如何實現(xiàn)el-select下拉選項的懶加載，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue使用mixin分發(fā)組件的可復(fù)用功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
Vue中keep-alive 實現(xiàn)后退不刷新并保持滾動位置
這篇文章主要介紹了Vue中keep-alive 實現(xiàn)后退不刷新并保持滾動位置的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
Vue無法訪問.env.development定義的變量值問題及解決
這篇文章主要介紹了Vue無法訪問.env.development定義的變量值問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
在開發(fā)中發(fā)現(xiàn)其中一個頁面moutned調(diào)用了兩次，而其他頁面正常，表示很懵逼，然后查找原因，終于找到了，其實歸根到底是要知道m(xù)ounted的調(diào)用機制問題。這篇文章主要介紹了vue mounted 調(diào)用兩次的解決辦法,需要的朋友可以參考下2018-10-10
vue開發(fā)樹形結(jié)構(gòu)組件(組件遞歸)
這篇文章主要為大家詳細介紹了vue開發(fā)樹形結(jié)構(gòu)組件的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
async和await作為異步函數(shù),語法很簡單,就是在函數(shù)前面加上async 關(guān)鍵字,來表示它是異步的,下面這篇文章主要給大家介紹了如何通過一文教會你vue中使用async和await的相關(guān)資料,需要的朋友可以參考下2022-10-10
在vue中使用vant TreeSelect分類選擇組件操作
這篇文章主要介紹了在vue中使用vant TreeSelect分類選擇組件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11