Vue條件渲染與循環(huán)渲染實戰(zhàn)詳解
v-if指令
v-if指令的值：true/false，可以控制標簽是否渲染
<div v-if="true">我出來了</div>
<div v-if="false">我不出去</div>v-if v-else-if v-else指令
類似我們之前學(xué)的if else語句，這里也是一樣的
溫度：<input type="number" v-model="temprature" /><br /><br />
天氣：
<span v-if="temprature<=5">寒冷</span>
<span v-else-if="temprature>5&&temprature<25">涼爽</span>
<span v-else>炎熱</span>
<hr />template標簽
template標簽/元素只是起到占位的作用，不會真正的出現(xiàn)在頁面上，也不會影響頁面的結(jié)構(gòu)。
需求：同時控制以下3個標題一起出現(xiàn)或者隱藏
<template v-if="true">
<h2>六下匹，人當送，內(nèi)。</h2>
<h3>六下匹，人當送，內(nèi)。</h3>
<h4>六下匹，人當送，內(nèi)。</h4>
</template>v-show指令
和if類似同樣是控制是否顯示，指令的值：true/false
v-if和v-show應(yīng)該如何選擇？
v-show指令是通過修改元素的CSS樣式的display屬性來達到顯示和隱藏的。
1. 如果一個元素在頁面上被頻繁的隱藏和顯示，建議使用v-show，因為此時使用v-if開銷比較大。
2. v-if的優(yōu)點：頁面加載速度快，提高了頁面的渲染效率。
3、v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。
v-for
語法格式：v-for指令。該指令用在被遍歷的標簽上
v-for="(element, index) in elements" :key="element.id"
或者
v-for="(element, index) of elements" :key="element.id"
遍歷對象
<h2>遍歷對象的屬性</h2>
<ul>
<li v-for="(value, propertyName) of user">{{propertyName}},{{value}}</li>
</ul>
<hr />遍歷字符串
<h2>遍歷字符串</h2>
<ul>
<li v-for="(c,index) of str">{{index}},{{c}}</li>
</ul>
<hr />遍歷指定次數(shù)
<h2>遍歷指定的次數(shù)</h2>
<ul>
<li v-for="(num,index) of 10">{{index}}, {{num}}</li>
</ul>
<hr />遍歷數(shù)組
<h2>遍歷數(shù)組</h2>
<!-- 靜態(tài)列表 -->
<ul>
<li>張三</li>
<li>李四</li>
<li>王五</li>
</ul>
<!-- 動態(tài)列表 -->
<ul>
<!--
1. v-for要寫在循環(huán)項上。
2. v-for的語法規(guī)則：
v-for="(變量名,index) in/of 數(shù)組"
變量名 代表了 數(shù)組中的每一個元素
-->
<li v-for="(name,index) of names">{{name}}-{{index}}</li>
</ul>
<table>
<tr>
<th>序號</th>
<th>會員名</th>
<th>年齡</th>
<th>選擇</th>
</tr>
<tr v-for="(vip,index) in vips">
<td>{{index+1}}</td>
<td>{{vip.name}}</td>
<td>{{vip.age}}</td>
<td><input type="checkbox" /></td>
</tr>
</table>虛擬DOM和diff算法
虛擬DOM：在內(nèi)存中的dom對象
diff算法：是一種能夠快速的比較出兩個事物不同之處的算法
v-for指令所在的標簽中，還有一個非常重要的屬性：:key
如果沒有指定 :key 屬性，會自動拿index作為key。這個key是這個dom元素的身份證號/唯一標識。
虛擬DOM中key的作用（diff到底是怎么做對比？）
key是虛擬DOM中對象的標識，當數(shù)據(jù)發(fā)生變化時，Vue會根據(jù)新數(shù)據(jù)生成新的虛擬DOM，隨后Vue進行新虛擬DOM與舊虛擬DOM的差異比較，比較規(guī)則如下
a:舊虛擬DOM中找到與新虛擬DOM中相同的key
若虛擬DOM中內(nèi)容沒變，直接使用之前的真實DOM
若虛擬DOM中內(nèi)容變了，則生成新的真實DOM，隨后替換掉頁面中之前的真實DOM
b:舊虛擬DOM中未找到與新虛擬DOM相同的key，則直接創(chuàng)建新的真實DOM，隨后渲染到頁面
用index作為key會引發(fā)的問題
第一個問題：效率低。
第二個問題：非常嚴重了。產(chǎn)生了錯亂。尤其是對數(shù)組當中的某些元素進行操作。（非末尾元素。）
<body>
<div id="app">
<h1>{{msg}}</h1>
<table>
<tr>
<th>序號</th>
<th>英雄</th>
<th>能量值</th>
<th>選擇</th>
</tr>
<!-- 這種寫法會出現(xiàn)錯亂 -->
<tr v-for="(hero,index) in heros" :key="index">
<td>{{index+1}}</td>
<td>{{hero.name}}</td>
<td>{{hero.power}}</td>
<td><input type="checkbox" /></td>
</tr>
<!-- 使用id則不會 -->
<tr v-for="(hero,index) in heros" :key="hero.id">
<td>{{index+1}}</td>
<td>{{hero.name}}</td>
<td>{{hero.power}}</td>
<td><input type="checkbox"></td>
</tr>
</table>
<button @click="add">添加英雄麥文</button>
</div>
<script>
const vm = new Vue({
el: "#app",
data() {
return {
msg: "虛擬dom與diff算法",
heros: [
{ id: "101", name: "艾格文", power: 10000 },
{ id: "102", name: "麥迪文", power: 9000 },
{ id: "103", name: "古爾丹", power: 8000 },
{ id: "104", name: "薩爾", power: 6000 },
// { id: "105", name: "麥文", power: 9100 }
],
};
},
methods: {
add() {
let obj = { id: "105", name: "麥文", power: 9100 };
this.heros.unshift(obj);
},
},
});
</script>
</body>到此這篇關(guān)于Vue條件渲染與循環(huán)渲染實戰(zhàn)詳解的文章就介紹到這了,更多相關(guān)vue條件渲染與循環(huán)渲染內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue.js 使用v-cloak后仍顯示變量的解決方法 ,文中給大家提到了v-cloak的用法，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了在Vue3項目中使用如何echarts問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
mockjs是用來模擬產(chǎn)生一些虛擬的數(shù)據(jù)，可以讓前端在后端接口還沒有開發(fā)出來時獨立開發(fā)。這篇文章主要介紹了vue項目中mock.js的使用,需要的朋友可以參考下2019-05-05
vue-awesome-swiper 基于vue實現(xiàn)h5滑動翻頁效果【推薦】
說到h5的翻頁，很定第一時間想到的是swiper。但是我當時想到的卻是，vue里邊怎么用swiper。這篇文章主要介紹了vue-awesome-swiper - 基于vue實現(xiàn)h5滑動翻頁效果 ,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了Vue常用的修飾符及應(yīng)用場景解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了解決vue+elementui項目打包后樣式變化問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了記錄--使用el-time-picker默認值遇到的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue異步更新DOM及$nextTick執(zhí)行機制解讀
這篇文章主要介紹了Vue異步更新DOM及$nextTick執(zhí)行機制解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue mint-ui tabbar變組件使用方法及實例代碼，非常不錯具有參考借鑒價值,需要的朋友可以參考下2018-05-05
Vue使用electron轉(zhuǎn)換項目成桌面應(yīng)用方法介紹
Electron也可以快速地將你的網(wǎng)站打包成一個原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Vue和React中快速使用Electron的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11