vue 第二天 给对象列表 添加对象

 编号:<input type="text"   v-model="id" />
        姓名 :  <input type="text"   v-model="name" />

        <input type="button" name="name" value="添加+" @click="add" />
        <p v-for="( item,key,index ) in UserList"  :key="item.id">

            <input type="checkbox" />
            {{key}}   {{item.id}}--{{item.name}}

        </p>
 <script>

        const vm = new Vue({
            el:"#app2",
            data: {
                
                UserList: [

                    { id: 1, name: "张三" }, { id: 2, name: "李四" },
                    { id: 3, name: "雨泽" }, { id: 4, name: "牦牛" }, 
                  { id: 5, name: "网吧" }
                ],
                id: 0,
                name: ''
            }, methods:
            {
                add() {

                    this.UserList.push({ id: this.id, name: this.name });

                }


            }
        });
    </script>

 

posted on 2021-10-15 00:08  码农at突泉  阅读(770)  评论(0)    收藏  举报