vue(13)增删改查-蒲公英云

vue(13)增删改查

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <style type="text/css">    
        table tr td{ 
            border:1px solid gray;
        }
        table thead tr{ 
            background-color: lightgray;
        }    
        table{ 
            border-collapse: collapse;
        }
        div#app{ 
            margin:10px;
            width:400px;
            padding:20px;
        }
    </style>
</head>
<body>
    <script src="jquery.min.js"></script>
    <script src="vue.min.js"></script>
    <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="#" @click="edit(hero)">编辑</a>
                    </td>
                    <td>
                        <a href="#" @click="deleteHero(hero.id)">删除</a>
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        英雄名称：<input type="text" v-model="hero4Add.name">
                        <br>
                        血量：<input type="number" v-model="hero4Add.hp">
                        <br>
                        <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">
            <br>
            <input type="hidden" v-model="hero4Update.id">
            <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:410}
            ],
            hero4Add:{ id:0,name:'',hp:'0'},
            hero4Update:{ id:0,name:'',hp:'0'}
        };
        var maxId = 3;
        for(var i=0;i<data.heros.length;i++){ 
            if(data.heros[i].id > maxId){ 
                maxId = this.heros[i].id;
            }
        }
        //view
        var vue = new Vue({ 
            el:"#app",
            data:data,
            methods:{ 
                add:function(event){ 
                    //获取最大id
                    maxId++;
                    //计算最大值
                    this.hero4Add.id = maxId;
                    if(this.hero4Add.name.length == 0){ 
                        this.hero4Add.name = "hero#"+this.hero4Add.id
                    }
                    //把对象加入数组
                    this.heros.push(this.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(){ 
                    $("#heroListTable").show();
                    $("#div4Update").hide();
                },
                cancel:function(){ 
                    $("#heroListTable").show();
                    $("#div4Update").hide();
                }
            }
        });
    </script>    
</body>
</html>