資訊專欄INFORMATION COLUMN
摘要：在中配合條件渲染一整組因?yàn)槭且粋€(gè)指令，需要將它添加到一個(gè)元素上。因此，如果需要非常頻繁地切換，則使用較好如果在運(yùn)行時(shí)條件不太可能改變，則使用較好。
vue的條件渲染 v-if
v-if指令可以插入和刪除所命令的模板
Yes
data:{
ok:true
}
輸出HTML
Yes
當(dāng)我們更改 ok 為 false時(shí)
我們會(huì)發(fā)現(xiàn)頁面的 Yes 消失，在控制臺(tái)里面會(huì)發(fā)現(xiàn) h1 標(biāo)簽也已經(jīng)消失。
我們知道 js 里面有 if 判斷語句是 if 和else if 和 else 配合使用，所以 vue 也為我們提供了一個(gè) v-else-if 和 v-else 指令與 v-if 配合使用,但是 v-else-if 和 v-else 必須緊跟在 v-if 或者 v-else-if 元素之后。
比如我們做一個(gè)小例子來演示一下,假設(shè)ok>=90,我們顯示優(yōu)秀，ok>=60時(shí)，顯示及格，OK<60時(shí)，顯示不及格。
優(yōu)秀
及格
不及格
data:{
ok:100
}
當(dāng)我們更改ok的值為 100 ，80 ， 40 時(shí)，我們會(huì)發(fā)現(xiàn)頁面所顯示的依次是 優(yōu)秀 ， 及格 ， 不及格。
在 < template > 中配合 v-if 條件渲染一整組因?yàn)?v-if 是一個(gè)指令，需要將它添加到一個(gè)元素上。但是如果我們想切換多個(gè)元素呢？此時(shí)我們可以把一個(gè) < template > 元素當(dāng)做包裝元素，并在上面使用 v-if。最終的渲染結(jié)果不會(huì)包含 < template > 元素。
Title
Paragraph 1
Paragraph 2
data:{
ok:true
}
輸出HTML
Title Paragraph 1 Paragraph 2
我們在控制臺(tái)會(huì)發(fā)現(xiàn)< template > 元素真的并沒有渲染，而當(dāng)我們更改 ok 為 false ，我們會(huì)發(fā)現(xiàn)頁面所有內(nèi)容全部消失。
v-showv-show也是根據(jù)條件控制元素的顯示，用法與 v-if 相同，但是 v-show 與 v-if 不同的是，v-show 的元素始終會(huì)被渲染并保留在 DOM 中。v-show 是簡單地切換元素的 CSS 屬性 display 。
v-show 不支持 < template > 語法，也不支持 v-else
v-if VS v-showv-if 是“真正的”條件渲染，因?yàn)樗鼤?huì)確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建。
v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)，才會(huì)開始渲染條件塊。
相比之下， v-show 就簡單得多——不管初始條件是什么，元素總是會(huì)被渲染，并且只是簡單地基于 CSS 進(jìn)行切換。
一般來說， v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運(yùn)行時(shí)條件不太可能改變，則使用 v-if 較好。
v-if 和 v-for 一起使用當(dāng) v-if 與 v-for 一起使用時(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í)，這種優(yōu)先級(jí)的機(jī)制會(huì)十分有用
data:{
todo:[
{text:1,ok:true},
{text:2,ok:true},
{text:3,ok:true},
]
}
當(dāng) ok 為 true 時(shí)，輸出為
1 2 3
當(dāng)我更改 data 里面第二的 ok 的值為 false 時(shí)，會(huì)輸出
1 3
這是先進(jìn)行 v-for 的渲染，然后在進(jìn)行 v-if 的渲染。
用 key 管理可復(fù)用的元素Vue 會(huì)盡可能高效地渲染元素，通常會(huì)復(fù)用已有元素而不是從頭開始渲染。這么做，除了使 Vue 變得非?？熘?，還有一些有用的好處。例如，如果你允許用戶在不同的登錄方式之間切換:
那么在上面的代碼中切換 loginType 將不會(huì)清除用戶已經(jīng)輸入的內(nèi)容。因?yàn)閮蓚€(gè)模板使用了相同的元素， 不會(huì)被替換掉——僅僅是替換了它的 placeholder。
這樣也不總是符合實(shí)際需求，所以 Vue 為你提供了一種方式來聲明“這兩個(gè)元素是完全獨(dú)立的——不要復(fù)用它們”。只需添加一個(gè)具有唯一值的 key 屬性即可：
注意，
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85127.html
摘要：并在上面使用，最終渲染結(jié)果將不包括元素。另外一個(gè)根據(jù)條件展示元素的指令，用法與大致相同。注意，不支持元素，也不支持與看完了文章，你會(huì)發(fā)現(xiàn)我們可以利用和兩個(gè)指令來控制我們元素的行為。 熟悉 Angular 的同學(xué)對(duì)指令肯定不會(huì)陌生，Vue中也借鑒了指令這一特性，在 Vue 中指令都是帶有 v- 的特殊屬性，那么指令有什么作用呢？ 我的理解就是：指令是用來控制 DOM 元素的行為，例如最...
摘要：模版語法中的模版是基于的模版語法，所有的模版都是合法的，所以能被遵循規(guī)范的瀏覽器和解析器解析。表達(dá)式模版中不僅僅可以進(jìn)行簡單的數(shù)據(jù)綁定操作，我們還可以在模版中進(jìn)行簡單的表達(dá)式。我們也簡單的敘述了模版編譯的整個(gè)流程。 我們在上一篇說到如何把 Vue 實(shí)例中的數(shù)據(jù)顯示到視圖中，就會(huì)需要用到我們的模版，我們只是簡單的使用了一些，模版其實(shí)還有很多其他的特性。今天我們就來看看模版的其他特性。 模...
摘要：條件渲染上一篇與綁定下一篇的事件處理方法在中配合渲染一整組在使用控制元素的時(shí)候，我們需要將它添加到這個(gè)元素上去。最終的渲染結(jié)果不會(huì)包含元素。渲染如下列表渲染使用把一個(gè)數(shù)組對(duì)應(yīng)為一組元素我們用指令根據(jù)一組數(shù)組的選項(xiàng)列表進(jìn)行渲染。 條件渲染 上一篇：Class 與 Style 綁定：https://segmentfault.com/a/11...下一篇：Vue的事件處理方法：https:/...
摘要：拿到的都是而不是原始值，且這個(gè)值會(huì)動(dòng)態(tài)變化。精讀對(duì)于的與，筆者做一些對(duì)比。因此采取了作為優(yōu)化方案只有當(dāng)?shù)诙€(gè)依賴參數(shù)變化時(shí)才返回新引用。不需要使用等進(jìn)行性能優(yōu)化，所有性能優(yōu)化都是自動(dòng)的。前端精讀幫你篩選靠譜的內(nèi)容。 1. 引言 Vue 3.0 的發(fā)布引起了軒然大波，讓我們解讀下它的 function api RFC 詳細(xì)了解一下 Vue 團(tuán)隊(duì)是怎么想的吧！ 首先官方回答了幾個(gè)最受關(guān)注的...
摘要：圖在中應(yīng)用三數(shù)據(jù)渲染過程數(shù)據(jù)綁定實(shí)現(xiàn)邏輯本節(jié)正式分析從到數(shù)據(jù)渲染到頁面的過程，在中定義了一個(gè)的構(gòu)造函數(shù)。一、概述 vue已是目前國內(nèi)前端web端三分天下之一，也是工作中主要技術(shù)棧之一。在日常使用中知其然也好奇著所以然，因此嘗試閱讀vue源碼并進(jìn)行總結(jié)。本文旨在梳理初始化頁面時(shí)data中的數(shù)據(jù)是如何渲染到頁面上的。本文將帶著這個(gè)疑問一點(diǎn)點(diǎn)追究vue的思路?？傮w來說vue模版渲染大致流程如圖1所...
閱讀 2473·2021-11-23 09:51
閱讀 533·2019-08-30 13:59
閱讀 1833·2019-08-29 11:20
閱讀 2541·2019-08-26 13:41
閱讀 3249·2019-08-26 12:16
閱讀 740·2019-08-26 10:59
閱讀 3335·2019-08-26 10:14
閱讀 607·2019-08-23 17:21
