v-for中key的使用注意事项

<!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>v-for中的key</title>

    <script src="../lib/vue.js"></script>

</head>

<body>

    <div class="app">

        id:<input type="text" v-model="id">

        name:<input type="text" v-model="name">

        <input type="button" value="增加" @click="add">

        <p v-for="(item,i) in arr" :key="item.id">

            <!-- v-for循环key使用时只能使用number获取string（item.id），而且必须使用v-bind属性绑定的形式指定key的值-->

            <input type="checkbox" name="" id="">       id:{{item.id}}      name:{{item.name}}

        </p>

        <!-- v-for遍历数组中的对象 -->

    </div>

    <script>

        var vm = new Vue({

            el:'.app',

            data:{

                arr:[

                    {'id':1,'name':'齐怪1'},

                    {'id':2,'name':'齐怪2'},

                    {'id':3,'name':'齐怪3'},

                ],

                id:'',

                name:''

            },

            methods:{

                add() {

                    this.arr.unshift({'id':this.id,'name':this.name})

                }

            }

        })

    </script>

</body>

</html>
巴特西

vue.js（09）--v-for中的key

v-for中key的使用注意事项

最新文章

热门文章
