這幾天慢慢的開始寫了一些界面，一些簡單的跳轉(zhuǎn)邏輯處理等穿扳，還是很有成就感的衩侥， 昨天呢，寫到了這樣的一個(gè)界面：
第一反應(yīng)矛物，iview里面的Tabs標(biāo)簽頁嵌套Card茫死，然后根據(jù)數(shù)據(jù)源顯示不同的數(shù)據(jù)，說干就干履羞，開始了堆代碼：
效果也很好峦萎，是我想要的：
但是呢， 寫完我就泄氣了忆首，這又不是寫demo爱榔，這樣寫還怎么動(dòng)態(tài)創(chuàng)建， 怎么動(dòng)態(tài)顯示內(nèi)容啊~ 白寫/(ㄒoㄒ)/~~
那怎么辦呢糙及？
js語言雖然我不熟練详幽， 但是往哪里思考我有大量經(jīng)驗(yàn)啊，這樣的界面，放Objective-C語言下唇聘， 就是一個(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)行列表渲染跋苄ぁ１碇啤！控乾！
- 用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ù)組元素迭代的別名蜕衡。
如下截圖是vue.js官網(wǎng)上的案例：
由此我們可以看出夭拌，items可以作為我們的數(shù)據(jù)源為我們提供界面所需要數(shù)據(jù)， 我們只需要使用v-for將列表進(jìn)行渲染衷咽，很簡單的樣子哈哈~
真的是這樣嗎？ 我又往下翻了翻官方文檔描述：
當(dāng) Vue.js 用
v-for正在更新已渲染過的元素列表時(shí)蒜绽，它默認(rèn)用“就地復(fù)用”策略镶骗。如果數(shù)據(jù)項(xiàng)的順序被改變，Vue 將不會(huì)移動(dòng) DOM 元素來匹配數(shù)據(jù)項(xiàng)的順序躲雅， 而是簡單復(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ù)做粤， 如此簡單就解決了， 開心開心~~~
