摘要:列表渲染用把一個數組對應為一組元素我們用指令根據一組數組的選項列表進行渲染。你也可以用替代作為分隔符把對象屬性渲染列表你也可以提供第二個的參數為鍵名第三個參數為索引渲染組件列表自定義組件里,你可以像任何普通元素一樣用。
列表渲染 用v-for把一個數組對應為一組元素
我們用 v-for 指令根據一組數組的選項列表進行渲染。 v-for 指令需要以 item in items 形式的特殊語法, items 是源數據數組并且 item 是數組元素迭代的別名。
{{item.text}}{{wenben}}
data:{ items:[ {text:"chifan",isOk:true}, {text:"shuijue",isOk:false}, {text:"kandianshi",isOk:true}, {text:"dayouxi",isOk:true}, {text:"kandianying",isOk:false}, ] }
在 v-for 塊中,我們擁有對父作用域屬性的完全訪問權限。 v-for 還支持一個可選的第二個參數為當前項的索引。
你也可以用 of 替代 in 作為分隔符{{index}}{{item.text}}{{wenben}}
v-for把對象屬性渲染列表
{{value}}
你也可以提供第二個的參數為鍵名:
{{key}} is {{value}}
第三個參數為索引:
v-for渲染組件列表{{index}}{{key}} is {{value}}
自定義組件里,你可以像任何普通元素一樣用 v-for 。
2.2.0+ 的版本里,當在組件中使用 v-for 時,key 現在是必須的。
一段取值范圍的v-for
v-for 也可以取整數。在這種情況下,它將重復多次模板。
{{ n }}
v-for on a
我們想要顯示一個數組的過濾或排序副本,而不實際改變或重置原始數據。在這種情況下,可以創建返回過濾或排序數組的計算屬性。
{{num}}
在計算屬性不適用的情況下 (例如,在嵌套 v-for 循環中) 你可以使用一個 method 方法:
數組更新檢測 變異方法{{num}}
Vue 包含一組觀察數組的變異方法,所以它們也將會觸發視圖更新。這些方法如下:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
重塑數組變異方法(mutation method),顧名思義,會改變被這些方法調用的原始數組。相比之下,也有非變異(non-mutating method)方法,例如: filter(), concat() 和 slice() 。這些不會改變原始數組,但總是返回一個新數組。當使用非變異方法時,可以用新數組替換舊數組:
example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/) })注意事項
1.當你利用索引直接設置一個項時,例如: vm.items[indexOfItem] = newValue
2.當你修改數組的長度時,例如: vm.items.length = newLength
為了解決第一類問題,以下兩種方式都可以實現和 vm.items[indexOfItem] = newValue 相同的效果, 同時也將觸發狀態更新:
// Vue.set Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice example1.items.splice(indexOfItem, 1, newValue)
為了解決第二類問題,你可以使用 splice:
example1.items.splice(newLength)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/85153.html
摘要:條件渲染上一篇與綁定下一篇的事件處理方法在中配合渲染一整組在使用控制元素的時候,我們需要將它添加到這個元素上去。最終的渲染結果不會包含元素。渲染如下列表渲染使用把一個數組對應為一組元素我們用指令根據一組數組的選項列表進行渲染。 條件渲染 上一篇:Class 與 Style 綁定:https://segmentfault.com/a/11...下一篇:Vue的事件處理方法:https:/...
之前在vue里面綁定數據,都只是單個地綁定。這期我們來看一下怎樣渲染列表,然后通過事件監聽方法往列表里面增加item。 列表渲染 廢話不多說,直接上代碼: {{ item }} var app = new Vue({ el: #app, data: { list: [ ...
摘要:與綁定數據綁定一個常見需求是操作元素的列表和它的內聯樣式。兩者只能選其一對象語法我們可以傳給一個對象,以動態地切換。注意不支持語法。相比之下,簡單得多元素始終被編譯并保留,只是簡單地基于切換。這意味著將分別重復運行于每個循環中。 vue Class 與 Style 綁定 數據綁定一個常見需求是操作元素的 class 列表和它的內聯樣式。因為它們都是屬性,我們可以用 v-bind 處理...
摘要:原型方法通過原型方法方法來掛載實例。當響應式屬性發生變化時,會通知依賴列表中的對象進行更新。此時,對象執行方法,重新渲染節點。在執行過程中,如果需要讀取響應式屬性,則會觸發響應式屬性的。總結響應式屬性的原理 vue實例 初始化 完成以后,接下來就要進行 掛載。 vue實例掛載,即為將vue實例對應的 template模板,渲染成 Dom節點。 原型方法 - $mount ? 通過原...
閱讀 914·2021-11-22 13:54
閱讀 2843·2021-09-28 09:36
閱讀 2980·2019-08-30 15:55
閱讀 1952·2019-08-30 15:44
閱讀 544·2019-08-29 12:31
閱讀 2564·2019-08-28 18:18
閱讀 1199·2019-08-26 13:58
閱讀 1383·2019-08-26 13:44