v-for 列表渲染

最新推荐文章于 2024-05-15 18:29:17 发布

肖白衣

最新推荐文章于 2024-05-15 18:29:17 发布

阅读量262

点赞数

分类专栏： Vue2 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_59709533/article/details/129387870

版权

Vue2 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

v-for 列表渲染

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
v-for 不仅可以遍历数组还可以遍历对象，与模板语法一起使用可以达到同时创立多个节点的效果，大大的增加了工作效率；

v-for 遍历对象

在v-for中还可以使用对象的数据格式来进行循环，其中传递的参数与数组的有所不同。
可以传对象中属性的名字，属性值，索引等等

检测数组的变化

在对数据源进行增、删、改、查的操作时，使用下列方法时，会被vue所检测到
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

<!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.7.14/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li>数组</li>
            <li v-for="(arr,index) in arrs">{{index}}-{{arr.name}}</li>
        </ul>
        
        <ul>
            <li>对象</li>
            <li v-for="(obj,name) in objs">{{name}}:{{obj}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: "#app", 
            data: {
                // 数组
                arrs: [
                    {
                        id: 1,
                        name: '小红'
                    },
                    {
                        id: 2,
                        name: '小王'
                    },
                    {
                        id: 3,
                        name: '小李'
                    },
                    {
                        id: 4,
                        name: '小陈'
                    }
                ],
                objs:{
                    name:"小于",
                    age:18,
                    like:"打游戏"
                }

            }
        })
    </script>
</body>

</html>