實例講解vue v-for 資料處理

前面我們和大家分享了vue元件中v for指令介紹及使用v-for出現告警問題解析內容，本文我們將和大家分享vue v-for 資料處理，v-for的基本使用：使用v- for="item in list"  或 v-for="item of list" 進行遍歷，使用list:list:[{n:1},{n:2},{n:3},{n:4}, {n:5},{n:6}] 時為了方便擴展， 更貼近實際專案需求。

 <p id="app">
        <ul>
            <li v-for="item in list">{{item.n}}</li>
        </ul>
    </p>
    </body>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                list:[{n:1},{n:2},{n:3},{n:4},{n:5},{n:6}]
            }
        })
    </script>

v-for 給了兩個參數key  和index

這裡需要對遍歷的資料分為數組和 物件分別對待

數組下是沒有key值的

而物件下可以得到參數key值實際顯示效果如下：

<p id="app">
        <ul>
            <li v-for="(item,index,key) of list">{{item.n}}
                <p>index={{ index }}</p>
                <p>key={{key}}</p>
            </li>
        </ul>
        <p>
            <p v-for="(item,key,index) of obj">
                {{item}}：{{key}}：{{index}}
            </p>
        </p>
    </p>
    </body>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                list:[{n:11},{n:22},{n:33},{n:44},{n:55},{n:66}],
                obj:{color:'red',age:18,sex:'girl'}
            }
        })
    </script>

v-for支援等數迭代

v-for="n in 10"

借助這個可以逐步載入數據，控制m值就行了

  <p v-for="i of m">
                {{list[i-1].n}}
            </p>
    </p>
    </body>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                m:3,
                list:[{n:11},{n:22},{n:33},{n:44},{n:55},{n:66}],
                obj:{color:'red',age:18,sex:'girl'}
            }
        })
    </script>

注意：

遍歷物件時使用不能this綁定元件，只能在處理函數中傳入index 或其他的一些特徵值來對當前list選定，再進行操作。賦值運算不能觸發頁面更新

所以vue js  提供了Vue.set(app.list,1,{n:33})的陣列資料更新方法。

#vue元件中v for指令介紹及使用v-for出現警告問題解析

#Vue.js常用指令之循環使用v-for指令教程

vue.js指令v-for使用及索引取得

以上是實例講解vue v-for 資料處理的詳細內容。更多資訊請關注PHP中文網其他相關文章！