Vue实现dom节点的增删改成

在学习了vue框架之后，对前端又有了新的认知，vue框架的使用跟之前的js或者jquery有着很大的不同，在使用js或者jquery，我们首先想到的就是获取页面的节点，然后再来改变或者添加上自己想要的数据，vue则是相反，vue看重的是数据，通过获取到的一些数据再来改变结构，所以在使用vue框架的时候，就要两种思维切换。今天就来讲下如何使用vue来对表格的进行增删改查。1、对表格数据的增加先制..

伯纳乌中的右路走廊

13947人浏览 · 2019-03-08 15:51:36

伯纳乌中的右路走廊 · 2019-03-08 15:51:36 发布

    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .text{
            width:600px ;
            height: 400px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            z-index: 3;
            background: white;
        }
        .text div:nth-of-type(1){
            line-height: 50px;
            display: flex;
            font-size: 30px;
            margin: 20px auto;
            justify-content: space-between;
            width: 80%;
        }
        .text div{
            margin: 30px  30px;
        }
        .text div:nth-of-type(5){
            margin: 40px 30px;
            height: 40px;
            justify-content: space-between;
            display: flex;
        }
        .text div:nth-of-type(5) button{
            width: 70px;
            color: #469FFF;
            background: #ECF5FF;
            border: 1px solid #469FFF;
        }
        .shadow{
            /*display: none;*/
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            background: rgba(0,0,0,.4);
        }
        fieldset{
            height: 330px;
            width: 800px;
            margin: 0 auto;
        }
        p{
            margin: 0 auto;
            width: 600px;
        }
        input{
            height: 40px;
        }
        select{
            height: 30px;
            width: 50px;
        }
        fieldset p:nth-of-type(1){
            margin-top: 40px;
        }
        fieldset p:nth-of-type(2){
            margin: 30px auto;
        }
        .est{
            margin-top: 20px;
            margin-left: 130px;
            width: 60px;
            height: 40px;
            background: #009A61;
            color: white;
            cursor: pointer;
        }
        table{
            width: 804px;
            margin: 0 auto;
            border-collapse: collapse;
        }
        thead tr:nth-of-type(1){
            text-align: center;
            height: 40px;
            color: white;
            background:  #009A61;
        }
        td{
            border: 1px solid #D3D3D3;
        }
        #box tr{
            height: 35px;
        }
        #box tr td:nth-of-type(4){
            display: flex;
            justify-content: center;
        }
        .mod{
            width: 40px;
            height: 30px;
            background:  #009A61;
            border: none;
            color: white;
        }
        .delet{
            margin-left: 5px;
            width: 40px;
            height: 30px;
            background:  #009A61;
            border: none;
            color: white;
        }
    </style>

</head>
<body>
<section id="bbox">
    <fieldset>
        <legend>创建类目</legend>
        <p>
            <label>名字</label>
            <input type="text" class="na" v-model="chat.name">
        </p>
        <p>
            <label>年龄</label>
            <input type="text" class="age" v-model="chat.age">
        </p>
        <p>
            <label>性别</label>
            <select class="gen" v-model="chat.sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </p>
        <button class="est" @click="change">创建</button>
    </fieldset>
    <table>
        <thead>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>删除</td>
        </tr>
        </thead>
        <tbody id="box">
        <tr v-for="(item ,index) in char">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td><button class="mod" @click="show(index)">修改</button><button class="delet" @click="remove(index)">删除</button></td>
        </tr>
        </tbody>
    </table>

在这里插入图片描述
用v-for动态生成结构

<tbody id="box">
        <tr v-for="(item ,index) in char">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td><button class="mod" @click="show(index)">修改</button><button class="delet" @click="remove(index)">删除</button></td>
        </tr>
        </tbody>

new Vue({
        el:"#bbox",
        data:{
            num:0,
            char:[{
                name:"张三",
                age:"18",
                sex:"男"}
            ],

另外在设一个新对象chat,当有新数据的时候就可以把数据放到chat,然后把chat添加到数据char中，在点击按钮时触发事件，执行v-for这样就能把数据添加上了。

change(){
                if (this.chat.name&&this.chat.age&&this.chat.sex!=""){
                    this.char.push(this.chat);
                    this.chat = {name: '', age: "", sex: ''}
                }
            }

2、数据的删除
数据删除比较简单只需要点击删除存储在char中的数据就可以，关键是要知道删除char中的第几条数据，这样就可以利用刚才v-for中的index了。

 remove(index){
                this.char.splice(index,1)
            },

3、数据的修改
数据的修改就是点击修改的时候弹出一个框，这个时候就需要做一个子组件当做

<template id="shadow">
    <div class="shadow">
        <div class="text">
            <div><p>修改</p><p style="text-align: right;font-size: 45px;cursor: pointer" id="turn_of" @click="hid">×</p></div>
            <div>
                <label>姓名</label>
                <input type="text" style="width: 450px" id="modname" v-model="sname">
            </div>
            <div>
                <label>年龄</label>
                <input type="text" style="width: 450px" id="modage" v-model="sage">
            </div>
            <div>
                <label>性别</label>
                <select style="width: 250px" id="modgen" v-model="ssex">
                    <option >男</option>
                    <option>女</option>
                </select>
            </div>
            <div><button id="sure" @click="send">确认</button><button id="cance" @click="hid">取消</button></div>
        </div>
    </div>
</template>

components:{
            "show":{
                template:"#shadow",
                props:["sna","sag","ssx"],
                data(){
                    return{
                        sname :this.sna,
                        sage:this.sag,
                        ssex:this.ssx
                    }
                },
                watch:{
                    sna:function(val){
                        this.sname = val
                    },
                    sag:function(val){
                        this.sage = val
                    },
                    ssx:function(val){
                        this.ssex = val
                    }
                },
                methods:{
                    hid(){
                        this.$emit("hhh")
                    },
                    send(){
                        let obj={
                            name:this.sname,
                            age:this.sage,
                            sex:this.ssex
                        };
                        this.$emit("sen",obj)
                    },
                }
            }
        }

当打开修改窗时，里面的数据要跟表格上的数据一致，这样就可以在建一个新对象，把选中的那条数据放到新的对象中。

<show v-show="dis"   @hhh="hide" @sen="newname"  :sna="cht.name" :sag="cht.age" :ssx="cht.sex" ></show>

 show(index){
                this.dis =true;
                num=index;
                this.cht.name = this.char[index].name;
                this.cht.age = this.char[index].age;
                this.cht.sex = this.char[index].sex;
            },

 watch:{
                    sna:function(val){
                        this.sname = val
                    },
                    sag:function(val){
                        this.sage = val
                    },
                    ssx:function(val){
                        this.ssex = val
                    }
                },

再通过$emit触发自定义事件由子组件向父组件传递数据。
写的有点乱，把整个完整的代码献上，给各位看官观看，希望对各位有所帮助。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .text{
            width:600px ;
            height: 400px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            z-index: 3;
            background: white;
        }
        .text div:nth-of-type(1){
            line-height: 50px;
            display: flex;
            font-size: 30px;
            margin: 20px auto;
            justify-content: space-between;
            width: 80%;
        }
        .text div{
            margin: 30px  30px;
        }
        .text div:nth-of-type(5){
            margin: 40px 30px;
            height: 40px;
            justify-content: space-between;
            display: flex;
        }
        .text div:nth-of-type(5) button{
            width: 70px;
            color: #469FFF;
            background: #ECF5FF;
            border: 1px solid #469FFF;
        }
        .shadow{
            /*display: none;*/
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            background: rgba(0,0,0,.4);
        }
        fieldset{
            height: 330px;
            width: 800px;
            margin: 0 auto;
        }
        p{
            margin: 0 auto;
            width: 600px;
        }
        input{
            height: 40px;
        }
        select{
            height: 30px;
            width: 50px;
        }
        fieldset p:nth-of-type(1){
            margin-top: 40px;
        }
        fieldset p:nth-of-type(2){
            margin: 30px auto;
        }
        .est{
            margin-top: 20px;
            margin-left: 130px;
            width: 60px;
            height: 40px;
            background: #009A61;
            color: white;
            cursor: pointer;
        }
        table{
            width: 804px;
            margin: 0 auto;
            border-collapse: collapse;
        }
        thead tr:nth-of-type(1){
            text-align: center;
            height: 40px;
            color: white;
            background:  #009A61;
        }
        td{
            border: 1px solid #D3D3D3;
        }
        #box tr{
            height: 35px;
        }
        #box tr td:nth-of-type(4){
            display: flex;
            justify-content: center;
        }
        .mod{
            width: 40px;
            height: 30px;
            background:  #009A61;
            border: none;
            color: white;
        }
        .delet{
            margin-left: 5px;
            width: 40px;
            height: 30px;
            background:  #009A61;
            border: none;
            color: white;
        }
    </style>

</head>
<body>
<section id="bbox">
    <fieldset>
        <legend>创建类目</legend>
        <p>
            <label>名字</label>
            <input type="text" class="na" v-model="chat.name">
        </p>
        <p>
            <label>年龄</label>
            <input type="text" class="age" v-model="chat.age">
        </p>
        <p>
            <label>性别</label>
            <select class="gen" v-model="chat.sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </p>
        <button class="est" @click="change">创建</button>
    </fieldset>
    <table>
        <thead>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>删除</td>
        </tr>
        </thead>
        <tbody id="box">
        <tr v-for="(item ,index) in char">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td><button class="mod" @click="show(index)">修改</button><button class="delet" @click="remove(index)">删除</button></td>
        </tr>
        </tbody>
    </table>
    <show v-show="dis"   @hhh="hide" @sen="newname"  :sna="cht.name" :sag="cht.age" :ssx="cht.sex" ></show>
</section>
<template id="shadow">
    <div class="shadow">
        <div class="text">
            <div><p>修改</p><p style="text-align: right;font-size: 45px;cursor: pointer" id="turn_of" @click="hid">×</p></div>
            <div>
                <label>姓名</label>
                <input type="text" style="width: 450px" id="modname" v-model="sname">
            </div>
            <div>
                <label>年龄</label>
                <input type="text" style="width: 450px" id="modage" v-model="sage">
            </div>
            <div>
                <label>性别</label>
                <select style="width: 250px" id="modgen" v-model="ssex">
                    <option >男</option>
                    <option>女</option>
                </select>
            </div>
            <div><button id="sure" @click="send">确认</button><button id="cance" @click="hid">取消</button></div>
        </div>
    </div>
</template>
<script src="js/vue.js"></script>
<script>
   new Vue({
        el:"#bbox",
        data:{
            num:0,
            char:[{
                name:"张三",
                age:"18",
                sex:"男"}
            ],
            chat:{
                name:"",
                age:"",
                sex:""
            },
            cht:{
                name:"",
                age:"",
                sex:""
            },
            dis:false
        },
        methods:{
            change(){
                if (this.chat.name&&this.chat.age&&this.chat.sex!=""){
                    this.char.push(this.chat);
                    this.chat = {name: '', age: "", sex: ''}
                }
            },
            remove(index){
                this.char.splice(index,1)
            },
            show(index){
                this.dis =true;
                num=index;
                this.cht.name = this.char[index].name;
                this.cht.age = this.char[index].age;
                this.cht.sex = this.char[index].sex;
            },
            hide(){
                this.dis=false;
            },
            newname(data){
                this.dis=false;
                this.char[num].name=data.name;
                this.char[num].age = data.age;
                this.char[num].sex = data.sex;
            }
        },
        components:{
            "show":{
                template:"#shadow",
                props:["sna","sag","ssx"],
                data(){
                    return{
                        sname :this.sna,
                        sage:this.sag,
                        ssex:this.ssx
                    }
                },
                watch:{
                    sna:function(val){
                        this.sname = val
                    },
                    sag:function(val){
                        this.sage = val
                    },
                    ssx:function(val){
                        this.ssex = val
                    }
                },
                methods:{
                    hid(){
                        this.$emit("hhh")
                    },
                    send(){
                        let obj={
                            name:this.sname,
                            age:this.sage,
                            sex:this.ssex
                        };
                        this.$emit("sen",obj)
                    },
                }
            }
        }
    })


</script>
</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^