VUE指令-列表渲染v-for

時間 2019-11-11

標籤 vue 指令列表渲染简体版

原文原文鏈接

v-for 指令根據一組數組的選項列表進行渲染。v-for 指令須要使用 item in items 形式的特殊語法，items 是源數據數組而且 item 是數組元素迭代的別名。javascript

v-for="item in items"html

vue

<div style="height: 150px;background: #CCC;margin: 5px;">java

<div style="font-size: 20px;">數組

v0.v-for指令示例(默認方式)</div>app

<hr />ide

<div>oop

<div style="font-size: 20px;" v-for="item in items">性能

Name:{{item.name}}ui

</div>

v-for="(item,index) in items"

v1.v-for指令示例(item,index))</div>

<hr />

<div>

Name:{{item.name}} + Key:{{key}} + Index:{{index}}

</div>

v-for="(value,key,index) in items" 對象迭代

v0.v-for指令示例(value,key,index)</div>

<hr />

<div>

Name:{{value}} + Key:{{key}} + Index:{{index}}

</div>

也能夠用 of 替代 in 做爲分隔符，由於它是最接近 JavaScript 迭代器的語法。

// TODO

key

當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用「就地複用」策略。若是數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序，而是簡單複用此處每一個元素，而且確保它在特定索引下顯示已被渲染過的每一個元素。這個相似 Vue 1.x 的 track-by="$index" 。

這個默認的模式是高效的，可是隻適用於不依賴子組件狀態或臨時 DOM 狀態 (例如：表單輸入值) 的列表渲染輸出。

爲了給 Vue 一個提示，以便它能跟蹤每一個節點的身份，從而重用和從新排序現有元素，你須要爲每項提供一個惟一 key 屬性。理想的 key 值是每項都有的且惟一的 id。這個特殊的屬性至關於 Vue 1.x 的 track-by ，但它的工做方式相似於一個屬性，因此你須要用 v-bind 來綁定動態值 (在這裏使用簡寫)：

<div v-for="item in items" :key="item.id">

    <!-- 內容 -->

  </div>

建議儘量在使用 v-for 時提供 key，除非遍歷輸出的 DOM 內容很是簡單，或者是刻意依賴默認行爲以獲取性能上的提高。

由於它是 Vue 識別節點的一個通用機制，key 並不與 v-for 特別關聯，key 還具備其餘用途，咱們將在後面的指南中看到其餘用途。

v-for with v-if

當它們處於同一節點，v-for 的優先級比 v-if 更高，這意味着 v-if 將分別重複運行於每一個 v-for 循環中。當你想爲僅有的一些項渲染節點時，這種優先級的機制會十分有用

<!DOCTYPE html>
<html style="height: 100%;">

    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="../lib/vue.v2.5.12.js" ></script>
        <title>HelloDemo</title>
    </head>

    <body style="height: 100%;">
        <style>

        </style>
        <!-- 
            VUE指令v-for列表渲染
                v-for指令須要使用item in items形式的特殊語法，items是源數據數組而且item是數組元素迭代的別名。
                也能夠用 of 替代 in 做爲分隔符
            REF:
                http://www.runoob.com/vue2/vue-loop.html
                https://cn.vuejs.org/v2/guide/list.html
        -->
        <div id="appVue">
            <!-- 格式v-for="(value,key,index) in items" -->
            <!-- 對象迭代能夠有三個參數(value,key,index) -->
            <div style="height: 200px;background: #CCC;margin: 5px;">
                <div style="font-size: 20px;">
                    v0.v-for指令示例(value,key,index)</div>
                <hr />
                <div>
                    <div style="font-size: 20px;" v-for="(value,key,index) in obj">
                        Name:{{value}} + Key:{{key}} + Index:{{index}}
                    </div>
                </div>
            </div>

            <!-- 格式v-for="(item,index) in items" -->
            <!-- 數組只有兩個參數(item,index) -->
            <div style="height: 150px;background: #CCC;margin: 5px;">
                <div style="font-size: 20px;">
                    v1.v-for指令示例(item,index))</div>
                <hr />
                <div>
                    <div style="font-size: 20px;" v-for="(item,key,index) in items">
                        Name:{{item.name}} + Key:{{key}} + Index:{{index}}
                    </div>
                </div>
            </div>
            
            <!-- 格式v-for="item in items" -->
            <div style="height: 150px;background: #CCC;margin: 5px;">
                <div style="font-size: 20px;">
                    v0.v-for指令示例(默認方式)</div>
                <hr />
                <div>
                    <div style="font-size: 20px;" v-for="item in items">
                        Name:{{item.name}}
                    </div>
                </div>
            </div>            
        </div>
        <script>
            new Vue({
                    el: "#appVue",
                    data: {
                        items:[{
                            name:"AAA"
                        },{
                            name:"BBB"
                        },{
                            name:"CCC"
                        }],
                        obj:{
                            prop0:"AAA",
                            prop1:"BBB",
                            prop2:"CCC"
                        }
                    }
                }

            )
        </script>
    </body>
</html>

View Code

REF:

http://www.runoob.com/vue2/vue-loop.html

https://cn.vuejs.org/v2/guide/list.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。