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}] 时为了方便扩展， 更贴近实际项目需求。

 <div id="app">
        <ul>
            <li v-for="item in list">{{item.n}}</li>
        </ul>
    </div>
    </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值 实际显示效果如下：

<div id="app">
        <ul>
            <li v-for="(item,index,key) of list">{{item.n}}
                <div>index={{ index }}</div>
                <div>key={{key}}</div>
            </li>
        </ul>
        <div>
            <div v-for="(item,key,index) of obj">
                {{item}}：{{key}}：{{index}}
            </div>
        </div>
    </div>
    </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值就行了

  <div v-for="i of m">
                {{list[i-1].n}}
            </div>
    </div>
    </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选定，再进行操作。

<ul>
            <li v-for="(item,index,key) of list">{{item.n}}
                <div>index={{ index }}</div>
                <div>key={{key}}</div>
                <div v-on:click="removethis(index)">remove this</div>
            </li>
        </ul>

methods:{
         removethis:function(index){
             this.list.splice(index,1)
                

对data 的数组app.list[1]={n:33}直接赋值操作不能触发页面更新

所以vue js  提供了Vue.set(app.list,1,{n:33})的数组数据更新方法