Vue.js入门程序

-->

                <td><button  @click="del(index)" >删除</button></td>
            </tr>
            <tr >
                <td><button  @click="clear()" >清空</button></td>
            </tr>
        </table>
        <h3>添加</h3>
        姓名：<input type="text" v-model="userName"><br>
        年龄：<input type="text"  v-model="userAge"><br>
        <button @click="add">添加</button>

    </div>

    <script>

        let vm = new Vue({
            el: '#app',
            data: {
                arr: [{
                    userId: 1,
                    userName: '张三',
                    userAge: 20
                }, {
                    userId: 2,
                    userName: '李四',
                    userAge: 21
                }, {
                    userId: 3,
                    userName: '王五',
                    userAge: 22
                }],
                userName:'',
                userAge:null,
            },
            methods:{
                del(index){
                    
                    this.arr.splice(index,1);
                },
                clear(){
                    this.arr = [];
                },
                add(){
                    //获取控件
                    // let userName = this.userName;
                    // let userAge = this.userAge;
                    // let userId = (this.arr.length +1);
                    // this.arr.push({
                    //     userId,
                    //     userName,
                    //     userAge
                    // })
					let user = {
						userName:this.userName,
						userAge:this.userAge,
						userId:(this.arr.length + 1)
					}
					this.arr.push(user)
                }
            }
        });
    </script>

</body>

编号	姓名	年龄	操作
{{obj.userId}}	{{obj.userName}}	{{obj.userAge}}