v-for列表渲染

最新推荐文章于 2025-04-12 19:31:36 发布

小白菜鸟☜

最新推荐文章于 2025-04-12 19:31:36 发布

阅读量219

点赞数

文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/m0_66827203/article/details/125536436

版权

本文主要探讨Vue.js中使用v-for指令进行列表渲染的方法，包括基本语法和实践中的常见应用场景。通过实例展示如何将数据绑定到列表，并呈现动态效果。

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

列表渲染

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- v-for: 指令基于一个数组来渲染一个列表。v-for形式语法：itme in itmes
        其中：items:是源数据数组
              item:则是迭代的数组元素的别名
              index:数组的索引（下标）
    -->

        <!-- :key="" 为了给vue一个提示，使它能跟踪到每一个节点的身份，从而重用和重新排序现有元素 -->
        <ul>
            <li v-for="itme,index in itmes" :key="index">
                {{index}}---{{itme.message}}
            </li>
        </ul>
        <ul>
            <!--对object进行列表渲染的时候，首先获取value对象属性对应的值
            同时key也能获取value对象的属性  -->
            <li v-for="value, key in object" :key="key">
                {{key}}---{{value}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                itmes: [
                    { message: '1' },
                    { message: '2' }
                ],
                object: {
                    1: '123',
                    2: '234',
                    3: '345'
                }

            },

        })

    </script>

</body>

</html>