看程序学Vue.js 17- 用 VUE.JS 做一套 增删改查 CRUD

原创 于 2019-06-29 17:21:25 发布 · 219 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文通过实例演示如何使用VUE.js实现前端的增删改查(CRUD)操作，包括英雄角色的展示、新增、删除、编辑及更新，提供完整的HTML和JavaScript代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

步骤 1 : CRUD
CRUD 这个东西还是绕不过去的，毕竟业务上太常见了。
接下来会用 VUE.js 做一套 CRUD。 不过这个 CRUD，是仅仅前端的，并没有和服务端交互。
步骤 2 : 效果
直接操作就可以看到 CRUD 的效果了
步骤 3 : 分解动作
接下来，就按照查询，增加，删除，编辑和更新，由浅入深地把这个 CRUD 一点点做出来。
步骤 4 : 查询

<html>
<head>
    <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://how2j.cn/study/vue.min.js"></script>
    <style type="text/css">
        td{
            border:1px solid gray;
        }
         
        table{
            border-collapse:collapse;
        }
     
        div#app{
            margin:20px auto;
            width:400px;
            padding:20px;
        }       
    </style>
</head>
 
<body>
    <div id="app">
            <table id="heroListTable" >
                <thead>
                    <tr>
                        <th>英雄名称</th>
                        <th>血量</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="hero in heros ">
                        <td>{{hero.name}}</td>
                        <td>{{hero.hp}}</td>
                    </tr>
                </tbody>
            </table>
             
    </div>
 
<script type="text/javascript">
    //Model
    var data = {
        heros: [
        { id: 1, name: '盖伦', hp: 318},
        { id: 2, name: '提莫', hp: 320},
        { id: 3, name: '安妮', hp: 419},
        { id: 4, name: '死歌', hp: 325},
        { id: 5, name: '米波', hp: 422},
        ],
        hero4Add: { id: 0, name: '', hp: '0'},
        hero4Update: { id: 0, name: '', hp: '0'}
    };
         
    //ViewModel
    var vue = new Vue({
        el: '#app',
        data: data
    });
</script>
</body>
</html>

步骤 5 : 增加

<html>
<head>
    <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://how2j.cn/study/vue.min.js"></script>
    <style type="text/css">
        td{
            border:1px solid gray;
        }
         
        table{
            border-collapse:collapse;
        }
     
        div#app{
            margin:20px auto;
            width:400px;
            padding:20px;
        }       
    </style>
</head>
 
<body>
    <div id="app">
            <table id="heroListTable" >
                <thead>
                    <tr>
                        <th>英雄名称</th>
                        <th>血量</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="hero in heros ">
                        <td>{{hero.name}}</td>
                        <td>{{hero.hp}}</td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            英雄名称:
                            <input type="text"    v-model="hero4Add.name" />
                            <br>
                            血量：
                            <input type="number"    v-model="hero4Add.hp" />
                            <br>
                            <button type="button"  v-on:click="add">增加</button> 
                         </td>                  
                    </tr>                   
                </tbody>
            </table>
             
    </div>
 
<script type="text/javascript">
    //Model
    var data = {
        heros: [
        { id: 1, name: '盖伦', hp: 318},
        { id: 2, name: '提莫', hp: 320},
        { id: 3, name: '安妮', hp: 419},
        { id: 4, name: '死歌', hp: 325},
        { id: 5, name: '米波', hp: 422},
        ],
        hero4Add: { id: 0, name: '', hp: '0'},
        hero4Update: { id: 0, name: '', hp: '0'}
    };
         
    //用于记录最大id值
    var maxId = 5;
    //计算最大值
    for (var i=0;i<data.heros.length;i++){
        if (data.heros[i].id > maxId)
            maxId=  this.heros[i].id;
    }      
         
    //ViewModel
    var vue = new Vue({
        el: '#app',
        data: data,
        methods: {
            add: function (event) {
                //获取最大id
                maxId++;
                //赋予新id
                this.hero4Add.id = maxId;
                if(this.hero4Add.name.length==0)
                    this.hero4Add.name = "Hero#"+this.hero4Add.id;
                //把对象加入到数组
                this.heros.push(this.hero4Add);
                //让 hero4Add 指向新的对象
                this.hero4Add = { id: 0, name: '', hp: '0'}
            }
        }       
    });
     
</script>
</body>
</html>

步骤 6 : 删除

  <html>
<head>
    <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://how2j.cn/study/vue.min.js"></script>
    <style type="text/css">
        td{
            border:1px solid gray;
        }
         
        table{
            border-collapse:collapse;
        }
     
        div#app{
            margin:20px auto;
            width:400px;
            padding:20px;
        }       
    </style>
</head>
 
<body>
    <div id="app">
            <table id="heroListTable" >
                <thead>
                    <tr>
                        <th>英雄名称</th>
                        <th>血量</th>
                        <th>操作</th>                       
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="hero in heros ">
                        <td>{{hero.name}}</td>
                        <td>{{hero.hp}}</td>
                        <td>
                            <a href="#nowhere" @click="deleteHero(hero.id)">删除</a>
                        </td>                    
                    </tr>
                    <tr>
                        <td colspan="3">
                        英雄名称:
                        <input type="text"    v-model="hero4Add.name" />
                        <br>
                        血量：
                        <input type="number"    v-model="hero4Add.hp" />
                        <br>
                        <button type="button"  v-on:click="add">增加</button> 
                        </td>                  
                    </tr>                   
                </tbody>
            </table>
             
    </div>
 
<script type="text/javascript">
    //Model
    var data = {
        heros: [
        { id: 1, name: '盖伦', hp: 318},
        { id: 2, name: '提莫', hp: 320},
        { id: 3, name: '安妮', hp: 419},
        { id: 4, name: '死歌', hp: 325},
        { id: 5, name: '米波', hp: 422},
        ],
        hero4Add: { id: 0, name: '', hp: '0'},
        hero4Update: { id: 0, name: '', hp: '0'}
    };
         
    //用于记录最大id值
    var maxId = 5;
    //计算最大值
    for (var i=0;i<data.heros.length;i++){
        if (data.heros[i].id > maxId)
            maxId=  this.heros[i].id;
    }      
             
    //ViewModel
    var vue = new Vue({
        el: '#app',
        data: data,
        methods: {
            add: function (event) {
                //获取最大id
                maxId++;
                //赋予新id
                this.hero4Add.id = maxId;
                if(this.hero4Add.name.length==0)
                    this.hero4Add.name = "Hero#"+this.hero4Add.id;
                //把对象加入到数组
                this.heros.push(this.hero4Add);
                //让 hero4Add 指向新的对象
                this.hero4Add = { id: 0, name: '', hp: '0'}
            },
            deleteHero: function (id) {
                console.log("id"+id);
                for (var i=0;i<this.heros.length;i++){
                    if (this.heros[i].id == id) {
                        this.heros.splice(i, 1);
                        break;
                    }
                }
            }          
}       
    });
     
</script>
</body>
</html>

步骤 7 : 编辑和更新

<html>
<head>
    <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://how2j.cn/study/vue.min.js"></script>
    <style type="text/css">
        td{
            border:1px solid gray;
        }
          
        table{
            border-collapse:collapse;
        }
      
        div#app{
            margin:20px auto;
            width:400px;
            padding:20px;
        }      
    </style>
</head>
  
<body>
    <div id="app">
            <table id="heroListTable" >
                <thead>
                    <tr>
                        <th>英雄名称</th>
                        <th>血量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="hero in heros ">
                        <td>{{hero.name}}</td>
                        <td>{{hero.hp}}</td>
                        <td>
                            <a href="#nowhere" @click="edit(hero)">编辑</a>
                            <a href="#nowhere" @click="deleteHero(hero.id)">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            英雄名称:
                            <input type="text"    v-model="hero4Add.name" />
                            <br>
                            血量：
                            <input type="number"    v-model="hero4Add.hp" />
                            <br>
                            <button type="button"  v-on:click="add">增加</button> 
                         </td>                  
                    </tr>
                </tbody>
            </table>
              
            <div id="div4Update">
              
                            英雄名称:
                            <input type="text"    v-model="hero4Update.name" />
                            <br>
                            血量：
                            <input type="number"    v-model="hero4Update.hp" />                       
                            <input type="hidden"    v-model="hero4Update.id" />                       
                            <br>
                            <button type="button"  v-on:click="update">修改</button>                
                            <button type="button"  v-on:click="cancel">取消</button>                
              
            </div>
    </div>
  
    <script type="text/javascript">
        //修改区域隐藏起来先
        $("#div4Update").hide();
  
        //Model
        var data = {
            heros: [
            { id: 1, name: '盖伦', hp: 318},
            { id: 2, name: '提莫', hp: 320},
            { id: 3, name: '安妮', hp: 419},
            { id: 4, name: '死歌', hp: 325},
            { id: 5, name: '米波', hp: 422},
            ],
            hero4Add: { id: 0, name: '', hp: '0'},
            hero4Update: { id: 0, name: '', hp: '0'}
        };
          
        //用于记录最大id值
        var maxId = 5;
        //计算最大值
        for (var i=0;i<data.heros.length;i++){
            if (data.heros[i].id > maxId)
                maxId=  this.heros[i].id;
        }      
          
    //ViewModel
    var vue = new Vue({
        el: '#app',
        data: data,
        methods: {
            add: function (event) {
                //获取最大id
                maxId++;
                //赋予新id
                this.hero4Add.id = maxId;
                if(this.hero4Add.name.length==0)
                    this.hero4Add.name = "Hero#"+this.hero4Add.id;
                //把对象加入到数组
                this.heros.push(this.hero4Add);
                //让 hero4Add 指向新的对象
                this.hero4Add = { id: 0, name: '', hp: '0'}
            },
            deleteHero: function (id) {
                console.log("id"+id);
                for (var i=0;i<this.heros.length;i++){
                    if (this.heros[i].id == id) {
                        this.heros.splice(i, 1);
                        break;
                    }
                }
            },
            edit: function (hero) {
                $("#heroListTable").hide();
                $("#div4Update").show();
                this.hero4Update = hero;
            },
            update:function(){
                //因为v-model，已经同步修改了，所以只需要进行恢复显示就行了
                $("#heroListTable").show();
                $("#div4Update").hide();          
            },
            cancel:function(){
                //其实就是恢复显示
                $("#heroListTable").show();
                $("#div4Update").hide();
            }
        }
    });
    </script>
<div style="height:300px"></div>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值