清單渲染 Vue2.0與Vue1.0的差別

v-for： v-for 指令需要以 item in items 形式的特殊文法， items 是源資料數組并且 item 是數組元素疊代的别名。

基本用法：

<code> </code><code>arr:[</code><code>'apple'</code><code>,</code><code>'banana'</code><code>,</code><code>'cherry'</code><code>,</code><code>'durain'</code><code>]</code>

這種寫法類似Javascript種的關聯數組，key 和 value，item就相當于數組的value。那數組的下标是否也能打出來呢？

<code> </code><code><</code><code>li</code> <code>v-for</code><code>=</code><code>"item in arr"</code><code>>{{$index}} `item`</</code><code>li</code><code>></code>

同理，如果是對于一個對象呢？

<code> </code><code><</code><code>li</code> <code>v-for</code><code>=</code><code>"item in obj"</code><code>>{{$index}} {{$key}} `item`</</code><code>li</code><code>></code>

<code> </code><code>obj:{</code><code>'a'</code><code>:</code><code>'apple'</code><code>,</code><code>'b'</code><code>:</code><code>'banana'</code><code>,</code><code>'c'</code><code>:</code><code>'cherry'</code><code>}</code>

一樣可以取到對應的下标，key值和value值

那如果在頁面上有一個按鈕，點選一下就添加一個清單項出來怎麼實作呢？

<code> </code><code><</code><code>button</code> <code>@</code><code>click</code><code>=</code><code>"add"</code><code>>添加</</code><code>button</code><code>></code>

<code> </code><code><</code><code>button</code> <code>@</code><code>click</code><code>=</code><code>"delete"</code><code>>删除</</code><code>button</code><code>></code>

<code> </code><code>methods:{</code>

<code> </code><code>add:</code><code>function</code><code>(){</code>

<code> </code><code>this</code><code>.arr.push(</code><code>'watermelon'</code><code>)</code>

<code> </code><code>delete</code><code>:</code><code>function</code><code>(){</code>

<code> </code><code>this</code><code>.arr.splice(0,1)</code>

點選添加按鈕的時候，在數組的末尾添加一個子項；點選删除按鈕的時候，把數組的第一項删掉

我們用 v-for 指令根據一組數組的選項清單進行渲染。 v-for 指令需要以 item in items 形式的特殊文法， items 是源資料數組并且 item 是數組元素疊代的别名。

在 v-for 塊中，我們擁有對父作用域屬性的完全通路權限。 v-for 還支援一個可選的第二個參數為目前項的索引。

<code> </code><code><</code><code>li</code> <code>v-for</code><code>=</code><code>"(item,index) in items"</code> <code>class</code><code>=</code><code>"item-{{$index}}"</code><code>>{{$index}}-`parentMsg` `item`.`msg`</</code><code>li</code><code>></code>

<code><</code><code>script</code> <code>src</code><code>=</code><code>"resources/js/vue.js"</code><code>></</code><code>script</code><code>></code>

<code><</code><code>script</code><code>></code>

<code> </code><code>parentMsg:'滴滴',</code>

<code> </code><code>items:[</code>

<code></</code><code>script</code><code>></code>

Vue.js 1.0.17及以後版本支援of分隔符，更接近 JavaScript 周遊器的文法：

<code><</code><code>div</code> <code>v-for</code><code>=</code><code>"item of items"</code><code>></</code><code>div</code><code>></code>

Template v-for

如同 v-if 模闆，你也可以用帶有 v-for 的 <template> 标簽來渲染多個元素塊

<code> </code><code><</code><code>template</code> <code>v-for</code><code>=</code><code>"item in items"</code><code>></code>

<code> </code><code></</code><code>template</code><code>></code>

<code> </code><code>parentMsg:'滴滴',</code>

<code> </code><code>items:[</code>

對象疊代 v-for

也可以用 v-for 通過一個對象的屬性來疊代

<code> </code><code><</code><code>li</code> <code>v-for</code><code>=</code><code>"value in object"</code><code>>`value`</</code><code>li</code><code>></code>

<code> </code><code>object:{</code>

<code> </code><code>uname:'Roger Wu',</code>

<code> </code><code>country:'China'</code>

也可以提供第二個參數，鍵值：

<code> </code><code><li v-</code><code>for</code><code>=</code><code>"(key,value) in object"</code><code>>`key`: `value`</li></code>

<code><script src=</code><code>"resources/js/vue.js"</code><code>></script></code>

<code> </code><code>uname:</code><code>'Roger Wu'</code><code>,</code>

<code> </code><code>country:</code><code>'China'</code>

也可以提供第三個參數，索引值：

<code> </code><code><</code><code>li</code> <code>v-for</code><code>=</code><code>"(index,key,value) in object"</code><code>>{{$index}}-`key`: `value`</</code><code>li</code><code>></code>

在周遊對象時，是按 Object.keys() 的結果周遊，但是不能保證它的結果在不同的 JavaScript 引擎下是一緻的。

整數疊代 v-for

v-for 也可以取整數。在這種情況下，它将重複多次模闆。

Vue1.0版本

重複資料的渲染 track-by

前面所有的例子中，同一個數組中都沒有重複内容，那如果數組中出現重複内容的話，是否還能正常渲染呢？

代碼示例如下：

<code> </code><code><</code><code>li</code> <code>v-for</code><code>=</code><code>"item in items"</code><code>>`item`</</code><code>li</code><code>></code>

<code><</code><code>script</code> <code>src</code><code>=</code><code>"//cdn.bootcss.com/vue/1.0.26/vue.js"</code><code>></</code><code>script</code><code>></code>

<code> </code><code>items:['Tom','Marry','Jim']</code>

<code> </code><code>methods:{</code>

<code> </code><code>add:function(){</code>

<code> </code><code>return this.items.push('Roger')</code>

點選按鈕時，往數組中添加一個新的元素，這個一點問題也沒有。問題是，頁面渲染出新的元素‘Roger’以後，你再點這個按鈕，控制台報錯了。

數組中發現了重複元素，如果想要添加重複元素的話，可以使用 track-by="$index/uid" (可以是索引，也可以是資料庫中的id 值)

修改示例代碼如下：

<code> </code><code><</code><code>li</code> <code>v-for</code><code>=</code><code>"item in items"</code> <code>track-by</code><code>=</code><code>"$index"</code><code>>`item`</</code><code>li</code><code>></code>

再來看效果，完美解決

Vue 2.0版本

相比Vue 1.0 版本，Vue2.0 在清單渲染方面主要有以下幾個改變：

1、允許數組重複元素

還是上面的例子，我們引入一個Vue2.0 的js檔案

<code><</code><code>script</code> <code>src</code><code>=</code><code>"//cdn.bootcss.com/vue/2.0.8/vue.js"</code><code>></</code><code>script</code><code>></code>

沒有 track-by，把vue檔案換成了2.0版本，效果可見下圖，随意添加重複元素

2、去掉了一些隐式變量 $index, $key

如果想要擷取數組或對象元素的下标可以用 v-for="(val,index) in array"

先看Vue1.0版本的代碼示例：

<code> </code><code><</code><code>li</code> <code>v-for</code><code>=</code><code>"item in items"</code><code>>{{$index}}-`item`</</code><code>li</code><code>></code>

<code><</code><code>script</code> <code>src</code><code>=</code><code>"//cdn.bootcss.com/vue/1.0.18/vue.js"</code><code>></</code><code>script</code><code>></code>

<code> </code><code>items:['Apple','Hua Wei','Oppo','Vivo']</code>

使用 $index 來擷取數組下标，一點問題也沒有：

再看Vue2.0版本的代碼示例：

報錯了，說 $index在執行個體中沒有定義

我們剛才已經指出了 1.0版本和 2.0版本的差別，現在不妨試一試

<code> </code><code><</code><code>li</code> <code>v-for</code><code>=</code><code>"(item,index) in items"</code><code>>`index`-`item`</</code><code>li</code><code>></code>

檢視效果，完美解決

再來看一個關于 $key的例子

<code> </code><code><</code><code>li</code> <code>v-for</code><code>=</code><code>"value in items"</code><code>>{{$key}} - `value`</</code><code>li</code><code>></code>

<code> </code><code>items:{</code>

<code> </code><code>name:'Roger',</code>

<code> </code><code>gender:'male'</code>

Vue2.0版本

使用 $key：

報錯了，$key 未定義

使用 v-for="(item,key) in items"：

<code> </code><code><</code><code>li</code> <code>v-for</code><code>=</code><code>"(value,key) in items"</code><code>>`key` - `value`</</code><code>li</code><code>></code>

頁面渲染截圖：

3、track-by="$index/uid" 變成 <li v-for="(val,index) in list" :key="index">

在Vue1.0 中，track-by 除了可以讓數組添加重複元素以外，還有很大一個作用就是提升循環的性能

在Vue2.0中，數組重複元素已經不是問題了，性能提升這塊還是有必要的

<code> </code><code><</code><code>li</code> <code>v-for</code><code>=</code><code>"(item,index) in items"</code> <code>:key</code><code>=</code><code>"index"</code><code>>`index`-`item`</</code><code>li</code><code>></code>

<code>本文轉自 frwupeng517 51CTO部落格，原文連結:http://blog.51cto.com/dapengtalk/1862092</code>

清單渲染 Vue2.0與Vue1.0的差別

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條