Vue系列教程（十一）v-for指令的四种使用方式

程序员文章站 2022-02-19 06:34:24

...

v-for有三种用法:

1.迭代数组

v-for迭代普通数组的方式如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for循环普通数组</title>
</head>
<body>
<div id="app">
    <p v-for="item in list">{{item}}</p>
</div>
<script src="lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            list: [1, 2, 3, 4, 5, 6]
        },
        methods: {}
    })
</script>
</body>
</html>

如果想获取数组中元素的索引值，可以将代码修改如下：

<p v-for="(item,i) in list">索引值：{{i}}----{{item}}</p>

i即为索引值。

v-for迭代对象数组的方式如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for循环对象数组</title>
</head>
<body>
<div id="app">
    <p v-for="subject in list">{{subject.id}}----{{subject.name}}</p>
</div>
<script src="lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            list: [
                {id: 1, name: '高等数学'},
                {id: 2, name: '线性代数'},
                {id: 3, name: '概率论与数理统计'}
            ]
        },
        methods: {}
    })
</script>
</body>
</html>

页面效果如下：
Vue系列教程（十一）v-for指令的四种使用方式

2.迭代对象中的属性

v-for迭代对象中的属性的方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for循环对象</title>
</head>
<body>
<div id="app">
    <p v-for="(val,key) in user">{{val}} ---- {{key}}</p>
</div>
<script src="lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            user: {
                id: 1,
                name: 'lauyon',
                gender: '男'
            }
        },
        methods: {}
    })
</script>
</body>
</html>

页面效果：
Vue系列教程（十一）v-for指令的四种使用方式
注意：
在遍历对象身上的键值对的时候，除了有val和key，在第三个位置还有一个索引：

<p v-for="(val,key,i) in user">{{val}} ---- {{key}}---- {{i}}</p>

页面效果如下：
Vue系列教程（十一）v-for指令的四种使用方式

3.迭代数字

v-for迭代数字的方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for迭代数字</title>
</head>
<body>
<div id="app">
    <p v-for="count in 10">这是第 {{count}} 次循环</p>
</div>
<script src="lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {}
    })
</script>
</body>
</html>

页面效果如下：
Vue系列教程（十一）v-for指令的四种使用方式
注意：

如果使用v-for迭代数字，前面的count从1开始
in 后面可以放普通数组、对象数组、对象、数字

Vue系列教程（十一）v-for指令的四种使用方式

1.迭代数组

2.迭代对象中的属性

3.迭代数字

Vue系列教程（十二）v-for中key的使用注意事项

Vue系列教程（十一）v-for指令的四种使用方式