Vue列表渲染详解-优快云博客

本文链接：https://blog.youkuaiyun.com/owc1874/article/details/80786143

本文介绍Vue.js中如何使用v-for指令进行列表渲染。包括数组、对象及字典形式的数据展示方式，展示了如何通过v-for遍历不同类型的源数据并将其显示在页面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>07vue列表渲染</title>
    <script src="./vue.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:'.box',
                data:{
                    dataList:['a','b','c','d','e','f'],
                    newObj:{
                        "name":"lucy",
                        "age":18
                    },
                    objDataList:[
                    {
                        "name":"genery",
                        "age":18
                    },
                    {
                        "name":"bulse",
                        "age":20
                    },
                    {
                        "name":"naev",
                        "age":23
                    }

                    ]
                }
            })

        }
    </script>
</head>
<body>
    <div class="box">
        <ul>

        <!-- v-for 列表数据 -->
        <li v-for="(item,index) in dataList">{{index}}---{{item}}</li>
        <li v-for="item in dataList">{{item}}</li>

        <!-- 对象 -->
        <li v-for="(value,key) in newObj">{{key}}-------{{value}}</li>
        <li v-for="value in newObj">{{value}}</li>
        <!-- 字典形式 -->
        <li v-for="datadict in objDataList">{{datadict}}</li>
        <li v-for="datadict in objDataList">{{datadict.name}}</li>
        <li v-for="datadict in objDataList">{{datadict.age}}</li>
        </ul>
        <div v-for="item in dataList">div: {{item}}</div>
    </div>
</body>
</html>

vue的列表渲染其实就是通过指令v-for可以将一组数据渲染到页面中,这一组数据可以是数组抑或是对象,v-for指令需要使用item in items形式的特殊语法,items是源数据数组并且item是数组元素迭代的别名。