Vue基本的CRUD操作

最新推荐文章于 2024-08-12 08:55:57 发布

reg183

最新推荐文章于 2024-08-12 08:55:57 发布

阅读量4.4k

点赞数

分类专栏：前端文章标签： Vue

本文链接：https://blog.csdn.net/chendongpu/article/details/88714882

版权

前端专栏收录该内容

255 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>vue学习 语法demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="application/javascript" src="jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="app">


    <table>
        <tr>
            <th>序号</th>
            <th>名字</th>
            <th>年龄</th>
            <th>性别</th>
            <th>爱好</th>
            <th>操作</th>
        </tr>


        <tr v-for="(item,index) in users">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td>{{item.hobby}}</td>
            <td><a href="#" @click="edit(index)">编辑</a></td>
            <td><a href="#" @click="remove(index)">删除</a></td>
        </tr>

        <tr>
            <td><input type="" v-model="id" ></td>
            <td><input type="" v-model="name" ></td>
            <td><input type="" v-model="age" ></td>
            <td><input type="" v-model="sex" ></td>
            <td><input type="" v-model="hobby" ></td>
            <td>
                <a href="#" @click="add()" v-if="is_add">添加</a>

                <a href="#" @click="save()" v-if="is_edit">编辑</a>
            </td>
        </tr>

    </table>


</div>
<script src="vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            users:[
                {id:1,name:"张明",age:21,sex:"男",hobby:"上网"},
                {id:2,name:"金敏",age:21,sex:"女",hobby:"打游戏"},
                {id:3,name:"赵燕",age:20,sex:"女",hobby:"看书"},
                {id:4,name:"郑阳",age:25,sex:"男",hobby:"抽烟,喝酒"}
            ],
            id:"",
            name:"",
            age:"",
            sex:"",
            hobby:"",
            is_add:true,
            is_edit:false
        },
        filter:{

        },
        watch:{

        },
        methods: {
            edit: function (index) {
                console.log(index);
                var user = this.users[index];
                this.id=user.id;
                this.name=user.name;
                this.age=user.age;
                this.sex=user.sex;
                this.hobby=user.hobby;
                this.is_edit=true;
                this.is_add=false;
            },
            add: function()
            {
                this.users.push({id:this.id,name:this.name,age:this.age,sex:this.sex,hobby:this.hobby});
                this.id="";
                this.name="";
                this.sex="";
                this.age="";
                this.sex="";
                this.hobby="";
            },
            save:function(){
                var that = this;
                $.each(this.users,function(i,item){
                    if(item.id==that.id){
                        item.name=that.name;
                        item.age=that.age;
                        item.sex=that.sex;
                        item.hobby=that.hobby;

                    }
                });
                this.id="";
                this.name="";
                this.sex="";
                this.age="";
                this.sex="";
                this.hobby="";
                this.is_add=true;
            },
            remove:function(index){
               this.users.splice(index, 1);
            }
    }

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

运行效果如下