Vue中v-for应用

 

1.v-for遍历数组

【v-for遍历数组语法】

v-for="item in items"

•  tems：要遍历的数组，需要在vue的data中定义好；
• item：迭代得到的数组元素的别名。

【代码例子】

<div id="app">
    <ul>
        <li v-for="user in users">
            {{user.name}} : {{user.gender}} : {{user.age}}
        </li>
    </ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            users:[
                {name:'柳岩', gender:'女', age: 21},
                {name:'虎哥', gender:'男', age: 30},
                {name:'范冰冰', gender:'女', age: 24},
                {name:'刘亦菲', gender:'女', age: 18},
                {name:'古力娜扎', gender:'女', age: 25}
            ]
        }
    })
</script>

2.v-for数组角标

在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：

【v-for数组角标语法】

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

• items：要迭代的数组；
• item：迭代得到的数组元素别名；
• index：迭代到的当前元素索引，从0开始。 

【例子】

    <div id="app">
        <ul>
            <li v-for="(user,index) in users">
                {{index}} - {{user.name}} : {{user.gender}} : {{user.age}}
            </li>
        </ul>
    </div>

 3.v-for遍历对象

【v-for遍历对象语法】

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"

• 1个参数时，得到的是对象的值；
• 2个参数时，第一个参数是值，第二个参数是键；
• 3个参数时，第三个参数是索引，从0开始。

<div id="app">
    <ul>
        <li v-for="(value,key,index) in user">
            {{index}} - {{key}} : {{value}}
        </li>
    </ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            user:{name:'柳岩', gender:'女', age: 21}
        }
    })
</script>

4.v-for中的key

    当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。 
    这个功能可以有效的提高渲染的效率。
    但是要实现这个功能，你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。 
【代码例子】

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

【key使用说明】

• 这里使用了一个特殊语法：:key=""它可以让你读取vue中的属性，并赋值给key属性；
• 这里我们绑定的key是数组的索引，应该是唯一的。