溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“Vue怎么實現條件渲染與列表渲染”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Vue怎么實現條件渲染與列表渲染”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
<!--使用v-show做條件渲染-->
<h2 v-show="false">{{name}}</h2>
<!--或-->
<h2 v-show="1===3">{{name}}</h2>
舉例1
<div id="root">
<h3>當前n值是{{n}}</h3>
<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
//創建vue實例
new Vue({
el: "#root",
data: {
name: "你好",
n: 0
}
})
</script> <!--使用v-if做條件渲染-->
<h2 v-if="false">{{name}}</h2>
<h2 v-if="1===1">{{name}}</h2>
如果切換頻率高用 v-show，切換頻率低用 v-if
舉例2
<div id="root">
<h3>當前n值是{{n}}</h3>
<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 的邏輯是相同的，一個符合下邊的代碼就不執行了
<div id="root">
<h3>當前n值是{{n}}</h3>
<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>
<div id="root">
<h3>當前n值是{{n}}</h3>
<button @click="n++">點我n+1</button>
<template v-if="n===1">
<h3>2020</h3>
<h3>2021</h3>
<h3>2022</h3>
</template>
</div>條件渲染
1、v-if
寫法：
(1).v-if="表達式”
(2).v-else-if="表達式"
(3).v-else="表達式"
適用于：切換頻率較低的場景
特點：不展示的DOM元素直接被移除
注意: v-if可以和v-else-if、v-else一起使用，但要求結構不能被"打斷”
2、v-show
寫法：v-show="表達式"
適用于：切換頻率較高的場景
特點：不展示的DOM元素未被移除，僅僅是使用樣式隱藏掉
3.備注:
用v-if的時，元素可能無法獲取到，而使用v-show一定可以獲取到
用v-if的時，元素可能無法獲取到，而使用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">
<!--遍歷數組-->
<h3>人員列表(遍歷數組)</h3>
<ul>
<li v-for="(p,index) in persons" :key="index">
{{p.name}}--{{p.age}}
</li>
</ul>
<!--遍歷對象-->
<h3>貓咪信息(遍歷對象)</h3>
<ul>
<li v-for="(value,k) in cat" :key="k">
{{k}}:{{value}}
</li>
</ul>
<!--遍歷字符串-->
<h3>遍歷字符串(用的少)</h3>
<ul>
<li v-for="(char,index) in str" :key="k">
{{char}}-{{index}}
</li>
</ul>
<!--遍歷指定次數-->
<h3>遍歷指定次數(用的少)</h3>
<ul>
<li v-for="(index,number) in 5" :key="index">
{{index}}-{{number}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
//創建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、用于展示列表數據
2、語法：v-for="(item，index) in xxx" :key="yyy"
3、可遍歷：數組、對象、字符串（用的很少)、指定次數（用的很少)
如果用 index 做 key，循環遍歷 persons，同時在后邊增加 input，內容復制展示的信息，然后增加一個按鈕，點擊在列表前增加一個老劉
<div id="root">
<!--遍歷數組-->
<h3>人員列表(遍歷數組)</h3>
<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
//創建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>
錯亂原因：
當 id 做為 key
<ul>
<li v-for="(p,index) in persons" :key="p.id">
{{p.name}}--{{p.age}}
<input type="text"/>
</li>
</ul>
key 是虛擬DOM對象的標識，當數據發生變化時，Vue會根據【新數據】生成【新的虛擬DON】，隨后Vue進行【新虛擬DOM】與【舊虛擬DOM】的差異比較，比較規則如下：
(1).舊虛擬DOM中找到了與新虛擬DOM相同的key：
①若虛擬DOM中內容沒變直，接使用之前的真實DOM
②若虛擬DOM中內容變了，則生成新的真實DOM，隨后替換掉頁面中之前的真實DON
(2).舊虛擬DOM中未找到與新虛擬DOM相同的 key：
創建新的真實DOM，隨后渲染到到頁面
(1).對數據進行：逆序添加、逆序刪除等破壞順序操作，會產生沒有必要的真實DOM更新(界面效果沒問題，但效率低）
(2).如果結構中還包含輸入類的DOM，會產生錯誤DOM更新（界面有問題）
(1).最好使用每條數據的唯一標識作為key，比如id、手機號、身份證號、學號等唯一值
(2).如果不存在對數據的逆序添加、逆序刪除等破壞順序操作，僅用于渲染列表用于展示,使用index作為key是沒有問題的
讀到這里，這篇“Vue怎么實現條件渲染與列表渲染”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
