Vue 的條件渲染和列表渲染

go4it 發(fā)布于2019-08-20 19:06 / 2941人閱讀

摘要：條件渲染上一篇與綁定下一篇的事件處理方法在中配合渲染一整組在使用控制元素的時(shí)候，我們需要將它添加到這個(gè)元素上去。最終的渲染結(jié)果不會(huì)包含元素。渲染如下列表渲染使用把一個(gè)數(shù)組對(duì)應(yīng)為一組元素我們用指令根據(jù)一組數(shù)組的選項(xiàng)列表進(jìn)行渲染。

條件渲染

上一篇：Class 與 Style 綁定：https://segmentfault.com/a/11...
下一篇：Vue的事件處理方法：https://segmentfault.com/a/11...

v-if 在 < template > 中配合 v-if 渲染一整組

在使用 v-if 控制元素的時(shí)候，我們需要將它添加到這個(gè)元素上去。然而如果要切換很多元素的時(shí)候，一個(gè)個(gè)的添加就太麻煩了。這時(shí)候就可以使用 < template > 將一組元素進(jìn)行包裹，并在上面使用 v-if。最終的渲染結(jié)果不會(huì)包含 < template > 元素。

我們更改 ok 的值，就可以控制整組的元素了

v-else

你可以使用 v-else 指令來表示 v-if 的“else 塊”：


    Now you see me


    Now you don"t

v-else 元素必須緊跟在 v-if 或者 v-else-if 元素的后面——否則它將不會(huì)被識(shí)別。

v-else-if

v-else-if，顧名思義，充當(dāng) v-if 的“else-if 塊”。可以鏈?zhǔn)降厥褂枚啻危?/p>


    優(yōu)秀
    及格
    不及格

類似于 v-else，v-else-if 必須緊跟在 v-if 或者 v-else-if 元素之后。

可復(fù)用元素

Vue 會(huì)盡可能高效地渲染元素，通常會(huì)復(fù)用已有元素而不是從頭開始渲染。這么做，除了使 Vue 變得非常快之外，還有一些有用的好處。例如，如果你允許用戶在不同的登錄方式之間切換:

那么在上面的代碼中切換 loginType 將不會(huì)清除用戶已經(jīng)輸入的內(nèi)容。因?yàn)閮蓚€(gè)模板使用了相同的元素，< input > 不會(huì)被替換掉——僅僅是替換了它的 placeholder。

復(fù)制上面的代碼，在自己的瀏覽器中試一試。

有時(shí)候我們不希望瀏覽器保留我們輸入的內(nèi)容，所以 Vue 為你提供了一種方式來聲明“這兩個(gè)元素是完全獨(dú)立的——不要復(fù)用它們”。只需添加一個(gè)具有唯一值的 key 屬性即可：

v-show

另一個(gè)用于根據(jù)條件展示元素的選項(xiàng)是 v-show 指令。用法大致一樣：

Hello!

不同的是帶有 v-show 的元素始終會(huì)被渲染并保留在 DOM 中。v-show 是簡(jiǎn)單地切換元素的 CSS 屬性 display 。

渲染如下

列表渲染 使用 v-for 把一個(gè)數(shù)組對(duì)應(yīng)為一組元素

我們用 v-for 指令根據(jù)一組數(shù)組的選項(xiàng)列表進(jìn)行渲染。 v-for 指令需要以 item in items 形式的特殊語法， items 是源數(shù)據(jù)數(shù)組并且 item 是數(shù)組元素迭代的別名。


    
        {{item.text}}

渲染結(jié)果


    
        eat
        play
        game

v-for 還支持一個(gè)可選的第二個(gè)參數(shù)為當(dāng)前項(xiàng)的索引。


    
        {{index}}-{{item.text}}

結(jié)果

0-eat
1-paly
2-game

一個(gè)對(duì)象的 v-for

你也可以用 v-for 通過一個(gè)對(duì)象的屬性來迭代。


    
        {{value}}

結(jié)果

PureView
一個(gè)安靜的美男子
18

你一共可以提供三個(gè)參數(shù)，第二個(gè)參數(shù)為鍵名，第三個(gè)為索引：

{{index+1}}. {{key}}: {{value}}

結(jié)果

1. firstname: PureView
2. lastname: 一個(gè)安靜的美男子
3. age: 18

數(shù)組更新檢測(cè) 變異方法

Vue 包含一組觀察數(shù)組的變異方法，所以它們也將會(huì)觸發(fā)視圖更新。這些方法如下：

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

例如


    
        {{item.text}}

重塑數(shù)組

變異方法(mutation method)，顧名思義，會(huì)改變被這些方法調(diào)用的原始數(shù)組。相比之下，也有非變異(non-mutating method)方法，例如： filter(), concat() 和 slice() 。這些不會(huì)改變?cè)紨?shù)組，但總是返回一個(gè)新數(shù)組。當(dāng)使用非變異方法時(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é)的例子,返回的值不會(huì)改變?cè)瓟?shù)據(jù)，在控制臺(tái)打印我們就能看到了。

注意事項(xiàng)

由于 JavaScript 的限制， Vue 不能檢測(cè)以下變動(dòng)的數(shù)組：

當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，例如： vm.items[indexOfItem] = newValue

當(dāng)你修改數(shù)組的長(zhǎng)度時(shí)，例如： vm.items.length = newLength

為了解決第一類問題，以下兩種方式都可以實(shí)現(xiàn)和 vm.items[indexOfItem] = newValue 相同的效果，同時(shí)也將觸發(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)

對(duì)象更新檢測(cè)

由于現(xiàn)代JavaScript的限制，Vue無法檢測(cè)屬性添加或刪除。例如：

var exp=new Vue({
    data:{
        a:1
    }
})
vm.b=2 //模板內(nèi)無響應(yīng)

Vue是不允許動(dòng)態(tài)地向已創(chuàng)建的實(shí)例添加新的根級(jí)屬性的。這時(shí)候 Vue 提供了一個(gè)方法用來對(duì)對(duì)象添加屬性：

Vue.set(object,key,value)

舉個(gè)例子

var exp=new Vue({
    el:".exp",
    data:{
        obj:{
            me:"pureview",
            pet1:"dog",
            pet2:"cat",
            hobby:"games"
        }  
    }
})

我們?cè)诳刂婆_(tái)輸入下面的代碼，就可以看到模板內(nèi)的數(shù)據(jù)進(jìn)行了更新

Vue.set(exp.obj,"todo","eating")

除了添加屬性，我們也可以進(jìn)行刪除操作

Vue.delete(exp.obj,"pet2")

顯示過濾/排序結(jié)果

有時(shí)，我們想要顯示一個(gè)數(shù)組的過濾或排序副本，而不實(shí)際改變或重置原始數(shù)據(jù)。在這種情況下，可以創(chuàng)建返回過濾或排序數(shù)組的計(jì)算屬性。

比如我們?cè)谝粋€(gè)數(shù)組中取其偶數(shù)


    
        {{n}}

模板顯示結(jié)果：

在計(jì)算屬性不適用的情況下 (例如，在嵌套 v-for 循環(huán)中) 你可以使用一個(gè) method 方法：


    
        {{n}}

結(jié)果是一樣的

一段取值范圍的 v-for

v-for 也可以取整數(shù)。在這種情況下，它將重復(fù)多次模板。


  {{ n }}

結(jié)果

1 2 3 4 5 6 7 8 9 10

v-for 在 < template > 上

與模板v-if類似，您還可以使用帶有 v-for 的< template >標(biāo)簽來呈現(xiàn)多個(gè)元素的塊。

v-for 和 v-if

當(dāng) v-for 與 v-if 一起使用時(shí)，v-for 具有比 v-if 更高的優(yōu)先級(jí)，這意味著 v-if 將分別重復(fù)運(yùn)行于每個(gè) v-for 循環(huán)中。當(dāng)我們僅為某些項(xiàng)目渲染節(jié)點(diǎn)時(shí)，這可能很有用：


  {{ todo }}

而如果我們的目的是有條件地跳過循環(huán)的執(zhí)行，那么可以將 v-if 置于外層元素 (或 < template >)上。如:


  
    {{ todo }}
  

No todos left!

組件的 v-for

在 Vue 的 2.2.0 以上的版本中，我們要在組件中使用 v-for 時(shí)，必須使用 key

雖然在自定義組件里可以使用 v-for ，但是，他不能自動(dòng)傳遞數(shù)據(jù)到組件里，因?yàn)榻M件有自己獨(dú)立的作用域。為了傳遞迭代數(shù)據(jù)到組件里，我們要用 props ：

結(jié)果

從前有座山

山上有座廟

廟里有個(gè)老和尚

正在玩王者榮耀

To be continue......

上一篇：Class 與 Style 綁定：https://segmentfault.com/a/11...
下一篇：Vue的事件處理方法：https://segmentfault.com/a/11...

GPU云服務(wù)器云服務(wù)器 vue條件渲染條件渲染阿里云的渲染服務(wù)器怎么弄 c4d的渲染器有哪些

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85150.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

go4it

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

新的 Azure AD 漏洞讓黑客在不被發(fā)現(xiàn)的情況下暴力破解密碼

閱讀 1514·2021-10-11 10:59
ucloud，烏蘭察布快捷共享型云主機(jī)測(cè)評(píng) – 基于AMD Rome EPYC2

閱讀 1887·2021-09-09 11:36
前端菜鳥筆記 Day-4 CSS布局

閱讀 1402·2019-08-30 15:55
css比較經(jīng)典的例子

閱讀 1332·2019-08-29 11:20
開發(fā)者日?qǐng)?bào) 2019年3月30日

閱讀 3067·2019-08-26 13:39
還不會(huì)正則表達(dá)式？看這篇！

閱讀 1472·2019-08-26 13:37
JSONSERVER接口調(diào)試工具安裝配置

閱讀 1966·2019-08-26 12:11
手挽手帶你學(xué)VUE：一檔 VUE簡(jiǎn)介以及常用內(nèi)部指令

閱讀 1328·2019-08-23 14:28

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

Vue 的條件渲染和列表渲染

Title

Hello!

相關(guān)文章

**1-2. Vue.js核心知識(shí)之模板渲染**

Vue.js-內(nèi)置指令

vue.js入門教程之基礎(chǔ)語法

Vue整理02---條件渲染與列表渲染

Vue入門--基礎(chǔ)語法

發(fā)表評(píng)論

0條評(píng)論

go4it

男|高級(jí)講師

TA的文章

新的 Azure AD 漏洞讓黑客在不被發(fā)現(xiàn)的情況下暴力破解密碼

ucloud，烏蘭察布快捷共享型云主機(jī)測(cè)評(píng) – 基于AMD Rome EPYC2

前端菜鳥筆記 Day-4 CSS布局

css比較經(jīng)典的例子

開發(fā)者日?qǐng)?bào) 2019年3月30日

還不會(huì)正則表達(dá)式？看這篇！

JSONSERVER接口調(diào)試工具安裝配置

手挽手帶你學(xué)VUE：一檔 VUE簡(jiǎn)介以及常用內(nèi)部指令

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

Vue 的條件渲染和列表渲染

Title

Hello!

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！