使用Vue.js实现动态表格增删功能-优快云博客

本文链接：https://blog.youkuaiyun.com/Jackson27/article/details/101476282

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body >
<div id="app">
    <div>
        姓名:<input type="text" v-model="username"><br>
        姓别:<input type="text" v-model="usersex"><br>
        <button v-on:click="add">点击就会添加一条数据</button>

    </div>
    <table>
        <thead>
        <tr>
            <td></td>
            <td>姓名</td>
            <td>姓别</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="user in users" >
            <td><input type="checkbox"></td>
            <td>{{user.name}}</td>
            <td>{{user.sex}}
            <td>
                <button v-on:click="del">删除</button>
            </td>
            </td>

        </tr>
        </tbody>
    </table>
</div>
<script src="js/vue.js"></script>
<script>
    var vm=new Vue({
        el: '#app',
        data: {
            username:'',
            usersex:'',
            users:[
                {
                name:'小黑',
                age:'18',
                sex:'男'
            },
                {
                    name:'李白',
                    sex:'男',
                },
                {
                    name:'渣渣辉',
                    sex:'男'
                },
                {
                    name:'yyqx',
                    sex:'男'
                }

        ]},
        methods:{
            add(){
                user={
                    name:this.username,
                    sex:this.usersex
                }
                this.users.push(user);
            },
            del:function(index){
                this.users.splice(index,1);
            }

        }
    });
</script>
</body>
</html>