深入理解Vue 的條件渲染和列表渲染
這兩天學習了Vue.js 感覺條件渲染和列表渲染知識點挺多的，而且很重要，所以，今天添加一點小筆記。
條件渲染
v-if
在 < template > 中配合 v-if 渲染一整組
在使用 v-if 控制元素的時候，我們需要將它添加到這個元素上去。然而如果要切換很多元素的時候，一個個的添加就太麻煩了。這時候就可以使用 < template > 將一組元素進行包裹，并在上面使用 v-if。最終的渲染結果不會包含 < template > 元素。
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
<script>
data:{
ok:true
}
</script>
我們更改 ok 的值，就可以控制整組的元素了
v-else
你可以使用 v-else 指令來表示 v-if 的“else 塊”：
<div v-if="ok"> Now you see me </div> <div v-else> Now you don't </div>
v-else 元素必須緊跟在 v-if 或者 v-else-if 元素的后面——否則它將不會被識別。
v-else-if
v-else-if，顧名思義，充當 v-if 的“else-if 塊”。可以鏈式地使用多次：
<div> <p v-if="sc>=90">優(yōu)秀</p> <p v-else-if="sc>=60">及格</p> <p v-else="sc<60">不及格</p> </div>
類似于 v-else，v-else-if 必須緊跟在 v-if 或者 v-else-if 元素之后。
可復用元素
Vue 會盡可能高效地渲染元素，通常會復用已有元素而不是從頭開始渲染。這么做，除了使 Vue 變得非?？熘猓€有一些有用的好處。例如，如果你允許用戶在不同的登錄方式之間切換:
<div class="exp">
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
<input type="button" @click="btn" value="切換"/>
</div>
<script>
var exp=new Vue({
el:".exp",
data:{
loginType:"username"
},
methods:{
btn:function(){
if(this.loginType==="username"){
this.loginType="email"
}else{
this.loginType="username"
}
}
}
})
</script>
那么在上面的代碼中切換 loginType 將不會清除用戶已經輸入的內容。因為兩個模板使用了相同的元素，< input > 不會被替換掉——僅僅是替換了它的 placeholder。
復制上面的代碼，在自己的瀏覽器中試一試。
有時候我們不希望瀏覽器保留我們輸入的內容，所以 Vue 為你提供了一種方式來聲明“這兩個元素是完全獨立的——不要復用它們”。只需添加一個具有唯一值的 key 屬性即可：
<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email"> </template>
v-show
另一個用于根據(jù)條件展示元素的選項是 v-show 指令。用法大致一樣：
<h1 v-show="ok">Hello!</h1>
<script>
data:{
ok:false
}
</script>
不同的是帶有 v-show 的元素始終會被渲染并保留在 DOM 中。v-show 是簡單地切換元素的 CSS 屬性 display 。
渲染如下
<div style="display:none;"></div>
列表渲染
使用 v-for 把一個數(shù)組對應為一組元素
我們用 v-for 指令根據(jù)一組數(shù)組的選項列表進行渲染。 v-for 指令需要以 item in items 形式的特殊語法， items 是源數(shù)據(jù)數(shù)組并且 item 是數(shù)組元素迭代的別名。
<div class="exp">
<ul>
<li v-for="item in items">{{item.text}}</li>
</ul>
</div>
<script>
data:{
items:[
{text:"eat"},
{text:"play"},
{text:"game"}
]
}
</script>
渲染結果
<div class="exp">
<ul>
<li>eat</li>
<li>play</li>
<li>game</li>
</ul>
</div>
v-for 還支持一個可選的第二個參數(shù)為當前項的索引。
<div class="exp">
<ul>
<li v-for="item,index in items">{{index}}-{{item.text}}</li>
</ul>
</div>
<script>
var exp=new Vue({
el:".exp",
data:{
items:[
{text:'eat'},
{text:'paly'},
{text:'game'}
]
}
})
</script>
結果
0-eat
1-paly
2-game
一個對象的 v-for
你也可以用 v-for 通過一個對象的屬性來迭代。
<div class="exp">
<ul>
<li v-for="value in obj">{{value}}</li>
</ul>
</div>
<script>
var exp=new Vue({
el:".exp",
data:{
obj:{
firstname:"PureView",
lastname:"一個安靜的美男子",
age:18
}
}
})
</script>
結果
PureView
一個安靜的美男子
18
你一共可以提供三個參數(shù)，第二個參數(shù)為鍵名，第三個為索引：
<li v-for="value,key,index in obj">{{index+1}}. {{key}}: {{value}}</li>
結果
1. firstname: PureView
2. lastname: 一個安靜的美男子
3. age: 18
數(shù)組更新檢測
變異方法
Vue 包含一組觀察數(shù)組的變異方法，所以它們也將會觸發(fā)視圖更新。這些方法如下：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
例如
<div class="exp">
<ul>
<li v-for="item in items">{{item.text}}</li>
</ul>
</div>
<script>
var exp=new Vue({
el:".exp",
data:{
items:[
{text:"eat"},
{text:"play"},
{text:"game"}
]
}
})
exp.items.push({text:'watch TV'})
</script>
重塑數(shù)組
變異方法(mutation method)，顧名思義，會改變被這些方法調用的原始數(shù)組。相比之下，也有非變異(non-mutating method)方法，例如： filter(), concat() 和 slice() 。這些不會改變原始數(shù)組，但總是返回一個新數(shù)組。當使用非變異方法時，可以用新數(shù)組替換舊數(shù)組：
data:{
items:[
{text:"eat"},
{text:"play"},
{text:"game"},
{text:"gaming"},
{text:"wot"},
{text:"wows"},
{text:"wt"}
]
}
}
exp.items.slice(0,5)
利用上一節(jié)的例子,返回的值不會改變原數(shù)據(jù)，在控制臺打印我們就能看到了。
注意事項
由于 JavaScript 的限制， Vue 不能檢測以下變動的數(shù)組：
- 當你利用索引直接設置一個項時，例如： vm.items[indexOfItem] = newValue
- 當你修改數(shù)組的長度時，例如： vm.items.length = newLength
為了解決第一類問題，以下兩種方式都可以實現(xiàn)和 vm.items[indexOfItem] = newValue 相同的效果， 同時也將觸發(fā)狀態(tài)更新：
// Vue.set Vue.set(exp.items, indexOfItem, newValue)
// Array.prototype.splice exp.items.splice(indexOfItem, 1, newValue)
為了解決第二類問題，你可以使用 splice：
exp.items.splice(newLength)
對象更新檢測
由于現(xiàn)代JavaScript的限制，Vue無法檢測屬性添加或刪除。 例如：
var exp=new Vue({
data:{
a:1
}
})
vm.b=2 //模板內無響應
Vue是不允許動態(tài)地向已創(chuàng)建的實例添加新的根級屬性的。這時候 Vue 提供了一個方法用來對對象添加屬性：
Vue.set(object,key,value)
舉個例子
var exp=new Vue({
el:".exp",
data:{
obj:{
me:"pureview",
pet1:"dog",
pet2:"cat",
hobby:"games"
}
}
})
我們在控制臺輸入下面的代碼，就可以看到模板內的數(shù)據(jù)進行了更新
Vue.set(exp.obj,"todo","eating")
除了添加屬性，我們也可以進行刪除操作
Vue.delete(exp.obj,"pet2")
顯示過濾/排序結果
有時，我們想要顯示一個數(shù)組的過濾或排序副本，而不實際改變或重置原始數(shù)據(jù)。在這種情況下，可以創(chuàng)建返回過濾或排序數(shù)組的計算屬性。
比如我們在一個數(shù)組中取其偶數(shù)
<div class="exp">
<ul>
<li v-for="n in numbers">{{n}}</li>
</ul>
</div>
<script>
var exp=new Vue({
el:".exp",
data:{
num:[1,2,3,4,5,6,7,8,9,10]
},
computed:{
numbers:function(){
return this.num.filter(function(num){
return num%2===0
})
}
}
})
</script>
模板顯示結果：
2
4
6
8
10
在計算屬性不適用的情況下 (例如，在嵌套 v-for 循環(huán)中) 你可以使用一個 method 方法：
<div class="exp">
<ul>
<li v-for="n in even(num)">{{n}}</li>
</ul>
</div>
<script>
var exp=new Vue({
el:".exp",
data:{
num:[1,2,3,4,5,6,7,8,9,10]
},
methods:{
even:function(num){
return num.filter(function(num){
return num%2===0
})
}
}
})
</script>
結果是一樣的
一段取值范圍的 v-for
v-for 也可以取整數(shù)。在這種情況下，它將重復多次模板。
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
結果
1 2 3 4 5 6 7 8 9 10
v-for 在 < template > 上
與模板v-if類似，您還可以使用帶有 v-for 的< template >標簽來呈現(xiàn)多個元素的塊。
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
v-for 和 v-if
當 v-for 與 v-if 一起使用時，v-for 具有比 v-if 更高的優(yōu)先級，這意味著 v-if 將分別重復運行于每個 v-for 循環(huán)中。當我們僅為某些項目渲染節(jié)點時，這可能很有用：
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
而如果我們的目的是有條件地跳過循環(huán)的執(zhí)行，那么可以將 v-if 置于外層元素 (或 < template >)上。如:
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>
組件的 v-for
在 Vue 的 2.2.0 以上的版本中，我們要在組件中使用 v-for 時，不許使用 key
<my-component v-for="(item,index) in itmes" v-bind:key="index"></my-component>
雖然在自定義組件里可以使用 v-for ，但是，他不能自動傳遞數(shù)據(jù)到組件里，因為組件有自己獨立的作用域。為了傳遞迭代數(shù)據(jù)到組件里，我們要用 props ：
<my-component v-for="(item,index) in items" v-bind:key="index" :lie="item.text"l></my-component>
<script>
Vue.component('mycom', {
template: "<p>{{this.lie}}</p>",
props:["lie"]
})
var exp=new Vue({
el:".exp",
data:{
items:[
{text:'從前有座山'},
{text:'山上有座廟'},
{text:'廟里有個老和尚'},
{text:'正在玩王者榮耀'}
]
}
})
</script>
結果
從前有座山
山上有座廟
廟里有個老和尚
正在玩王者榮耀
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue數(shù)據(jù)變了但頁面沒有變的幾種情況及解決方法
如果,你發(fā)現(xiàn)自己需要在Vue中做一次強制更新,99.99%的情況,是你在某個地方做錯了事,本文給大家就介紹了Vue數(shù)據(jù)變了,但頁面沒有變的幾種情況及解決方法,并通過代碼示例介紹的非常詳細,需要的朋友可以參考下2024-08-08
Vue全局注冊中的kebab-case和PascalCase用法
這篇文章主要介紹了Vue全局注冊中的kebab-case和PascalCase用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
本文主要介紹了淺談Vue組件及組件的注冊方法，詳細的介紹了什么是組件，及其組件注冊的兩種方式(全局和局部)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
基于vue2.0的活動倒計時組件countdown(附源碼下載)
這是一款基于vue2.0的活動倒計時組件，可以使用服務端時間作為當前時間，在倒計時開始和結束時可以自定義回調函數(shù)。這篇文章主要介紹了基于vue2.0的活動倒計時組件countdown,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了多頁vue應用的單頁面打包方法(內含打包模式的應用)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
這篇文章主要給大家介紹了關于vue3封裝放大鏡組件的相關資料,封裝之后,使用起來就更簡單了,一個組件一行就可以,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了解決vue-cli輸入命令vue ui沒效果的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要為大家介紹了Vue?事件處理函數(shù)的綁定示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
有時候給頁面內容添加一個關鍵詞搜索功能,如果搜索結果能夠像瀏覽器搜索一樣高亮顯示,那找起來就會很明顯體驗會好很多,本文就來介紹一下vue搜索高亮popsearch組件的實現(xiàn)示例,感興趣的可以了解一下2023-09-09
vuejs+element UI table表格中實現(xiàn)禁用部分復選框的方法
今天小編就為大家分享一篇vuejs+element UI table表格中實現(xiàn)禁用部分復選框的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09