摘要:條件渲染上一篇與綁定下一篇的事件處理方法在中配合渲染一整組在使用控制元素的時候,我們需要將它添加到這個元素上去。最終的渲染結(jié)果不會包含元素。渲染如下列表渲染使用把一個數(shù)組對應(yīng)為一組元素我們用指令根據(jù)一組數(shù)組的選項列表進行渲染。
條件渲染
v-if 在 < template > 中配合 v-if 渲染一整組上一篇:Class 與 Style 綁定:https://segmentfault.com/a/11...
下一篇:Vue的事件處理方法:https://segmentfault.com/a/11...
在使用 v-if 控制元素的時候,我們需要將它添加到這個元素上去。然而如果要切換很多元素的時候,一個個的添加就太麻煩了。這時候就可以使用 < template > 將一組元素進行包裹,并在上面使用 v-if。最終的渲染結(jié)果不會包含 < template > 元素。
Title
Paragraph 1
Paragraph 2
我們更改 ok 的值,就可以控制整組的元素了
v-else你可以使用 v-else 指令來表示 v-if 的“else 塊”:
Now you see meNow you don"t
v-else 元素必須緊跟在 v-if 或者 v-else-if 元素的后面——否則它將不會被識別。
v-else-ifv-else-if,顧名思義,充當(dāng) v-if 的“else-if 塊”。可以鏈式地使用多次:
優(yōu)秀
及格
不及格
類似于 v-else,v-else-if 必須緊跟在 v-if 或者 v-else-if 元素之后。
可復(fù)用元素Vue 會盡可能高效地渲染元素,通常會復(fù)用已有元素而不是從頭開始渲染。這么做,除了使 Vue 變得非常快之外,還有一些有用的好處。例如,如果你允許用戶在不同的登錄方式之間切換:
那么在上面的代碼中切換 loginType 將不會清除用戶已經(jīng)輸入的內(nèi)容。因為兩個模板使用了相同的元素,< input > 不會被替換掉——僅僅是替換了它的 placeholder。
復(fù)制上面的代碼,在自己的瀏覽器中試一試。
有時候我們不希望瀏覽器保留我們輸入的內(nèi)容,所以 Vue 為你提供了一種方式來聲明“這兩個元素是完全獨立的——不要復(fù)用它們”。只需添加一個具有唯一值的 key 屬性即可:
v-show
另一個用于根據(jù)條件展示元素的選項是 v-show 指令。用法大致一樣:
Hello!
不同的是帶有 v-show 的元素始終會被渲染并保留在 DOM 中。v-show 是簡單地切換元素的 CSS 屬性 display 。
渲染如下
列表渲染 使用 v-for 把一個數(shù)組對應(yīng)為一組元素
我們用 v-for 指令根據(jù)一組數(shù)組的選項列表進行渲染。 v-for 指令需要以 item in items 形式的特殊語法, items 是源數(shù)據(jù)數(shù)組并且 item 是數(shù)組元素迭代的別名。
- {{item.text}}
渲染結(jié)果
- eat
- play
- game
v-for 還支持一個可選的第二個參數(shù)為當(dāng)前項的索引。
- {{index}}-{{item.text}}
結(jié)果
0-eat 1-paly 2-game一個對象的 v-for
你也可以用 v-for 通過一個對象的屬性來迭代。
- {{value}}
結(jié)果
PureView 一個安靜的美男子 18
你一共可以提供三個參數(shù),第二個參數(shù)為鍵名,第三個為索引:
結(jié)果
1. firstname: PureView 2. lastname: 一個安靜的美男子 3. age: 18數(shù)組更新檢測 變異方法
Vue 包含一組觀察數(shù)組的變異方法,所以它們也將會觸發(fā)視圖更新。這些方法如下:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
例如
重塑數(shù)組
- {{item.text}}
變異方法(mutation method),顧名思義,會改變被這些方法調(diào)用的原始數(shù)組。相比之下,也有非變異(non-mutating method)方法,例如: filter(), concat() 和 slice() 。這些不會改變原始數(shù)組,但總是返回一個新數(shù)組。當(dāng)使用非變異方法時,可以用新數(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ù)組:
當(dāng)你利用索引直接設(shè)置一個項時,例如: vm.items[indexOfItem] = newValue
當(dāng)你修改數(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 //模板內(nèi)無響應(yīng)
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" } } })
我們在控制臺輸入下面的代碼,就可以看到模板內(nèi)的數(shù)據(jù)進行了更新
Vue.set(exp.obj,"todo","eating")
除了添加屬性,我們也可以進行刪除操作
Vue.delete(exp.obj,"pet2")顯示過濾/排序結(jié)果
有時,我們想要顯示一個數(shù)組的過濾或排序副本,而不實際改變或重置原始數(shù)據(jù)。在這種情況下,可以創(chuàng)建返回過濾或排序數(shù)組的計算屬性。
比如我們在一個數(shù)組中取其偶數(shù)
- {{n}}
模板顯示結(jié)果:
2 4 6 8 10
在計算屬性不適用的情況下 (例如,在嵌套 v-for 循環(huán)中) 你可以使用一個 method 方法:
- {{n}}
結(jié)果是一樣的
一段取值范圍的 v-forv-for 也可以取整數(shù)。在這種情況下,它將重復(fù)多次模板。
{{ n }}
結(jié)果
1 2 3 4 5 6 7 8 9 10v-for 在 < template > 上
與模板v-if類似,您還可以使用帶有 v-for 的< template >標簽來呈現(xiàn)多個元素的塊。
當(dāng) v-for 與 v-if 一起使用時,v-for 具有比 v-if 更高的優(yōu)先級,這意味著 v-if 將分別重復(fù)運行于每個 v-for 循環(huán)中。當(dāng)我們僅為某些項目渲染節(jié)點時,這可能很有用:
而如果我們的目的是有條件地跳過循環(huán)的執(zhí)行,那么可以將 v-if 置于外層元素 (或 < template >)上。如:
No todos left!
組件的 v-for在 Vue 的 2.2.0 以上的版本中,我們要在組件中使用 v-for 時,必須使用 key
雖然在自定義組件里可以使用 v-for ,但是,他不能自動傳遞數(shù)據(jù)到組件里,因為組件有自己獨立的作用域。為了傳遞迭代數(shù)據(jù)到組件里,我們要用 props :
結(jié)果
從前有座山 山上有座廟 廟里有個老和尚 正在玩王者榮耀To be continue......
上一篇:Class 與 Style 綁定:https://segmentfault.com/a/11...
下一篇:Vue的事件處理方法:https://segmentfault.com/a/11...
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/85150.html
摘要:使用了基于的模板語法,允許開發(fā)者聲明式地將綁定至底層實例的數(shù)據(jù)。所有的模板都是合法的,所以能被遵循規(guī)范的瀏覽器和解析器解析。列表中使用把數(shù)組渲染成選項列表。我們通過這些渲染方式就可以輕松的通過數(shù)據(jù)控制頁面的顯示內(nèi)容了。 Vue.js 使用了基于 HTML 的模板語法,允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實例的數(shù)據(jù)。所有 Vue.js 的模板都是合法的 HTML ,所以能被...
摘要:如果一次判斷的是多個元素,可以在內(nèi)置的元素上使用條件指令,最終渲染的結(jié)果不會包含該元素。列表渲染也支持用代替作為分隔符,它更接近迭代器的語法的表達式支持一個可選參數(shù)作為當(dāng)前項的索引。分隔符前的語句使用括號,第二項就是當(dāng)前項的索引。 學(xué)習(xí)筆記:內(nèi)置指令 內(nèi)置指令 基本指令 v-cloak v-cloak不需要表達式,它會在Vue實例結(jié)束編譯時從綁定的HTML元素上移除,經(jīng)常和CSS的d...
摘要:與綁定數(shù)據(jù)綁定一個常見需求是操作元素的列表和它的內(nèi)聯(lián)樣式。兩者只能選其一對象語法我們可以傳給一個對象,以動態(tài)地切換。注意不支持語法。相比之下,簡單得多元素始終被編譯并保留,只是簡單地基于切換。這意味著將分別重復(fù)運行于每個循環(huán)中。 vue Class 與 Style 綁定 數(shù)據(jù)綁定一個常見需求是操作元素的 class 列表和它的內(nèi)聯(lián)樣式。因為它們都是屬性,我們可以用 v-bind 處理...
摘要:簡單使用解析循環(huán)列表時,參數(shù)為內(nèi)容,參數(shù)為,循環(huán)對象時,參數(shù)為,參數(shù)為列表數(shù)據(jù)的修改簡單使用的時候顯示的時候顯示切換狀態(tài)列表渲染增加一個刪除最后一個解析循環(huán)盡量可以接一個用來區(qū)分。 1.簡單的v-if v-else使用 true的時候顯示 else的時候顯示 切換狀態(tài) ...
摘要:在模板中放入太多的邏輯會讓模板過重且難以維護。它會根據(jù)控件類型自動選取正確的方法來更新元素。指令需要使用的語法,指的是原數(shù)據(jù)數(shù)組,指的是迭代的數(shù)組元素。 注:本教程所使用的vue版本為 2.5.16 MVC與MVVM MVC(Model-View-Controller): M指的是從后臺獲取到的數(shù)據(jù), V指的是顯示動態(tài)數(shù)據(jù)的html頁面, C是指響應(yīng)用戶操作、經(jīng)過業(yè)務(wù)邏輯處理后去更新...
閱讀 1496·2021-10-11 10:59
閱讀 1857·2021-09-09 11:36
閱讀 1370·2019-08-30 15:55
閱讀 1322·2019-08-29 11:20
閱讀 3057·2019-08-26 13:39
閱讀 1458·2019-08-26 13:37
閱讀 1951·2019-08-26 12:11
閱讀 1313·2019-08-23 14:28