Vue学习笔记（十一、v-for循环键值对）

ttod_qzstudio

于 2024-10-23 17:29:57 发布

阅读量566

点赞数 11

分类专栏： VUE 文章标签： vue.js 学习笔记

本文链接：https://blog.youkuaiyun.com/ttod/article/details/143187088

版权

VUE 专栏收录该内容

16 篇文章

订阅专栏

先看一个简单的将对象的属性和值作为键值对进行遍历的例子：

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

<head>
    <meta charset="UTF-8">
    <title>VueBaseCode</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <p v-for="(val,key) in user">{{key}}：{{val}}</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                user:{
                    name:'张三',
                    sex:'男',
                    age:18
                }
            },
            methods: {}
        });
    </script>
</body>

</html>

输出的结果是：

同样这里(val,key)的写法是第一个字符串对应值，第二个字符串对应键，这与字符串内容无关，只与位置有关，只是习惯上用val指代值，用key指代键，不过实际上还可以有第三个参数，就是索引，一般我们用 i 指代，写法参考如下：

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

输出结果如下：

对于使用键值对的循环，一般很少再去关注索引，后面我们大概也不会讨论这个内容。

下面我们看一个复选框和对象输出结合的例子：

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

<head>
    <meta charset="UTF-8">
    <title>VueBaseCode</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <label>Id: <input type="text" v-model="id"></label>
        <label>姓名: <input type="text" v-model="name"></label>
        <input type="button" value="增加元素" @click="add">
        <p v-for="item in list"><input type="checkbox">id:{{item.id}}--姓名:{{item.name}}</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                list: [
                    { id: 111, name: '张三', },
                    { id: 222, name: '李四', },
                    { id: 333, name: '王五', },
                    { id: 444, name: '麻六', },
                    { id: 555, name: '魏七', }
                ]
            },
            methods: {
                add() {
                    this.list.push({ id: this.id, name: this.name })
                    this.id=''
                    this.name=''
                }
            }
        });
    </script>
</body>

</html>

在上面的代码中通过v-model双向绑定的方式实现了data中的属性id与name与输入框的绑定，通过@实现了与按钮与add方法的绑定。这里p元素在循环中添加了复选框和对象内容，而add方法实现了添加对象的目的。

效果参考如下：

如果我们此时把add方法中的list.push改成list.unshift，向下面这样：

this.list.unshift({ id: this.id, name: this.name })

再执行增加元素按钮的时候，就会在列表的头部增加对象。

参考下图：

但是，此时如果给某一行的复选框进行勾选，当在头部增加对象的时候，复选框与对象之间并不绑定，这一般不是我们希望看到的。

为了解决这个问题我们只需要将

<p v-for="item in list"><input type="checkbox">id:{{item.id}}--姓名:{{item.name}}</p>

添加key绑定，就像下面这样：

<p v-for="item in list" :key="item.id"><input type="checkbox">id:{{item.id}}--姓名:{{item.name}}</p>

这里将p通过 :key 与item.id进行了绑定，不会再出现错位的问题。

同时需要注意的是，这里的 :key 只能绑定字符串和数字，类似下面这种绑定给对象是错误的做法：

<p v-for="item in list" :key="item"><input type="checkbox">id:{{item.id}}--姓名:{{item.name}}</p><!--错误的:key绑定-->