VUE基础--列表渲染

v-for 对于简单数组

使用 v-for 指令基于一个数组来渲染一个列表。

v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名

<template>
    <h2>列表渲染</h2>
    <p v-for="item in names">{{ item }}</p>
</template>

<script>
export default {
    data(){
        return{
            names:["Jack","John","Jenny"]
        }
    }
}
</script>

---

v-for 对于复杂数组

<template>
    <h2>列表渲染</h2>
    <div v-for="item in message">
        <p>姓名:{{item.name}}</p>
        <p>年龄:{{item.age}}</p>
    </div>
</template>

<script>
export default {
    data(){
        return{
            message:[
                {
                    name:"Jack",
                    age:20
                },
                {
                    name:"John",
                    age:21
                }
            ]
        }
    }
}
</script>

在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。 

格式为 (item,index) in items ，需注意索引值index为v-for中的第二个参数，这是其语法规定

<template>
    <div v-for="(item,index) in message">
        <span>{{index}}</span>
        <p>姓名:{{item.name}}</p>
        <p>年龄:{{item.age}}</p>
    </div>
</template>

<script>
export default {
    data(){
        return{
            message:[
                {
                    name:"Jack",
                    age:20
                },
                {
                    name:"John",
                    age:21
                }
            ]
        }
    }
}
</script>

 

---

 v-for与对象

仅带有一个参数时：

可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。

<template>
    <p v-for="item in message">{{item}}</p>
</template>

<script>
export default {
    data(){
        return{
            message:{
                title: 'How to do lists in Vue',
                author: 'Jane Doe',
                publishedAt: '2016-04-10'
            }
        }
    }
}
</script>

带有两个参数时：

可以通过提供第二个参数表示属性名 (例如 key)

<template>
    <p v-for="(value,key) in message">{{key}}--{{value}}</p>
</template>

<script>
export default {
    data(){
        return{
            message:{
                title: 'How to do lists in Vue',
                author: 'Jane Doe',
                publishedAt: '2016-04-10'
            }
        }
    }
}
</script>

带有三个参数时：

第三个参数表示位置索引

<template>
    <p v-for="(value,key,index) in message">{{index}}--{{key}}--{{value}}</p>
</template>

<script>
export default {
    data(){
        return{
            message:{
                title: 'How to do lists in Vue',
                author: 'Jane Doe',
                publishedAt: '2016-04-10'
            }
        }
    }
}
</script>

注：

也可以使用 of 作为分隔符来替代 in，这更接近 JavaScript 的迭代器语法：

<p v-for="i of 5">{{i}}</p>