Vue v-for循环中 key 属性的使用

v-for循环中 key 属性的使用使用到的方法unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。key属性使用重点1.v-for 循环的时候， key 属性只能使用 number 获取 string2.key 在使用的时候必须使用 v-bind 属性绑定的形式，指定 key 的值3.在...

AllenWalker1936

2751人浏览 · 2019-04-25 16:31:31

AllenWalker1936 · 2019-04-25 16:31:31 发布

v-for循环中 key 属性的使用

使用到的方法

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

key属性使用重点

1.v-for 循环的时候， key 属性只能使用 number 获取 string
2.key 在使用的时候必须使用 v-bind 属性绑定的形式，指定 key 的值
3.在组件中，使用 v-for 循环的时候，或者在一套特殊情况中，如果 v-for 有问题，必须在使用 v-for 的时候指定唯一的字符串/数字类型 :key 值

总代码

<!DOCTYPE html>
<head>
    <title>vue v-for循环中 key 属性的使用</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app1">
        <div>
            <label for="">ID:
                <input type="text" v-model="id">
            </label>
            <label for="">NAME:
                <input type="text" v-model="name">
            </label>
            <input type="button" value="添加" @click="add">
        </div>
        <!--  v-for 循环的时候， key 属性只能使用 number 获取 string  -->
        <!--  key 在使用的时候必须使用 v-bind 属性绑定的形式，指定 key 的值 -->
        <!--  在组件中，使用 v-for 循环的时候，或者在一套特殊情况中，如果 v-for 有问题，必须在使用 v-for 的时候指定唯一的字符串/数字类型 :key 值 -->
        <p v-for="item in list" :key="item">
        <input type="checkbox" name="" id="">
        {{item.id}}---{{item.name}}
        </p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app1",
            data: {
                list: [
                    {id:1, name:'香蕉'},
                    {id:2, name:'芭拉'},
                    {id:3, name:'苹果'},
                    {id:4, name:'榴莲'},
                    {id:5, name:'葡萄'},
                ]
            },
            methods: {
                add(){//添加方法
                    //this.list.push({ id:this.id,name:this.name })
                    //在后方添加
                    this.list.unshift({ id:this.id,name:this.name })
                    //在前方添加
                }
            }
        })
    </script>
</body>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^