這幾天慢慢的開始寫了一些界面，一些簡(jiǎn)單的跳轉(zhuǎn)邏輯處理等，還是很有成就感的， 昨天呢，寫到了這樣的一個(gè)界面：
第一反應(yīng)，iview里面的Tabs標(biāo)簽頁(yè)嵌套Card，然后根據(jù)數(shù)據(jù)源顯示不同的數(shù)據(jù)，說干就干，開始了堆代碼：
效果也很好，是我想要的：
但是呢， 寫完我就泄氣了，這又不是寫demo，這樣寫還怎么動(dòng)態(tài)創(chuàng)建， 怎么動(dòng)態(tài)顯示內(nèi)容啊~ 白寫/(ㄒoㄒ)/~~
那怎么辦呢？
js語(yǔ)言雖然我不熟練， 但是往哪里思考我有大量經(jīng)驗(yàn)啊，這樣的界面，放Objective-C語(yǔ)言下， 就是一個(gè)UITableView的事情， 如果不用tableView， 那也就是根據(jù)數(shù)據(jù)源進(jìn)行一個(gè)for循環(huán)創(chuàng)建嘛。
根據(jù)數(shù)據(jù)源進(jìn)行for循環(huán)創(chuàng)建， 可行~
那究竟怎么做呢？使用v-for指令進(jìn)行列表渲染?。。。?/strong>
- 用v-for把一個(gè)數(shù)組對(duì)應(yīng)為一組元素
我們用
v-for指令根據(jù)一組數(shù)組的選項(xiàng)列表進(jìn)行渲染。v-for指令需要使用item in items形式的特殊語(yǔ)法，items是源數(shù)據(jù)數(shù)組并且item是數(shù)組元素迭代的別名。
如下截圖是vue.js官網(wǎng)上的案例：
由此我們可以看出，items可以作為我們的數(shù)據(jù)源為我們提供界面所需要數(shù)據(jù)， 我們只需要使用v-for將列表進(jìn)行渲染，很簡(jiǎn)單的樣子哈哈~
真的是這樣嗎？ 我又往下翻了翻官方文檔描述：
當(dāng) Vue.js 用
v-for正在更新已渲染過的元素列表時(shí)，它默認(rèn)用“就地復(fù)用”策略。如果數(shù)據(jù)項(xiàng)的順序被改變，Vue 將不會(huì)移動(dòng) DOM 元素來匹配數(shù)據(jù)項(xiàng)的順序， 而是簡(jiǎn)單復(fù)用此處每個(gè)元素，并且確保它在特定索引下顯示已被渲染過的每個(gè)元素。這個(gè)類似 Vue 1.x 的track-by="$index"。
這個(gè)默認(rèn)的模式是高效的，但是只適用于不依賴子組件狀態(tài)或臨時(shí) DOM 狀態(tài) (例如：表單輸入值) 的列表渲染輸出。
為了給 Vue 一個(gè)提示，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項(xiàng)提供一個(gè)唯一
key屬性。理想的key值是每項(xiàng)都有的唯一 id。這個(gè)特殊的屬性相當(dāng)于 Vue 1.x 的track-by，但它的工作方式類似于一個(gè)屬性，所以你需要用v-bind來綁定動(dòng)態(tài)值。
官方給了個(gè)示例，如下：
這下子我清晰了~
直接上代碼吧：
從上面代碼可以看出， 上面我們用一個(gè)div標(biāo)簽包裹c(diǎn)ard， 然后對(duì)整個(gè)div代碼塊使用v-for指令渲染， 使用v-bind綁定數(shù)據(jù)源；
在script中返回我們的messages數(shù)據(jù)源， 這里的數(shù)據(jù)到時(shí)候可以替換為我們請(qǐng)求回來的動(dòng)態(tài)數(shù)據(jù)， 如此簡(jiǎn)單就解決了， 開心開心~~~
