v-for 中的 key

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .userList {
                border: 1px solid red;
                margin: 20px 0;
                padding: 10px 10px;
            }
        </style>
    </head>
    <body>
        <div id="app"></div>
        <script type="text/javascript" src="../js/vue.min.js"></script>
        <script src="lodash.min.js"></script>
        <script type="text/javascript">
            Vue.component('my-com', {
                template: `
                     <div class = 'userList'>
                        <div class = 'content'>
                            <h3>{{obj.name}}</h3>
                            <p>{{obj.content}}</p>
                        </div>
                        <div class ='control'>
                            <input type="text" placeholder = '请输入你的名字' />
                        </div>
                    </div>
                `,
                props: {
                    obj: Object
                }
            })


            var App = {
                data() {
                    return {
                        datas: [{
                                id: 1,
                                name: '张三',
                                content: '我是张三'
                            },
                            {
                                id: 2,
                                name: '李四',
                                content: '我是李四'
                            },
                            {
                                id: 3,
                                name: '王五',
                                content: '我是王五'
                            }
                        ]
                    }
                },
                template: `
                    <div>    
                        <button @click = 'change'>改变顺序</button>
                        <my-com v-for = '(item,index) in datas' :obj = 'item' :key = 'item.id'></my-com>
                    </div>
                `,
                methods: {
                    change() {
                        console.log(1);
                        this.datas = _.shuffle(this.datas);
                    }
                }
            };

            new Vue({
                el: '#app',
                components: {
                    App
                },
                template: `<App />`
            });
        </script>
    </body>
</html>

 

posted @ 2019-06-09 16:03  认真对待世界的小白  阅读(154)  评论(0)    收藏  举报