Vue.js系列教材（十七）- 用 Vue.js 做一套增删改查 CRUD

Vue.js系列教材（十六）- vue-cli 3 教程

工具版本兼容问题

步骤 1 : CRUD
步骤 2 : 效果
步骤 3 : 分解动作
步骤 4 : 查询
步骤 5 : 增加
步骤 6 : 删除
步骤 7 : 编辑和更新

步骤 1 :

CRUD

edit 顶折

纠问

CRUD 这个东西还是绕不过去的，毕竟业务上太常见了。
接下来会用 VUE.js 做一套 CRUD。不过这个 CRUD，是仅仅前端的，并没有和服务端交互。
需要看 VUE.js 和服务端交互的CRUD教程，请点击: VUE.JS + RESTFUL + PAGEHELPER + THYMELEAF + SPRINGBOOT 前后端分离 CRUD 教程

步骤 2 :

效果

edit 顶折

纠问

直接操作就可以看到 CRUD 的效果了

代码行数较多，请点击查看

<html>
<head>
    <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

//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>

渲染中渲染完成

效果

步骤 3 :

分解动作

edit 顶折

纠问

接下来，就按照查询，增加，删除，编辑和更新，由浅入深地把这个 CRUD 一点点做出来。

步骤 4 :

查询

edit 顶折

纠问

查询很简单，和前面的循环语句教程内容一样，没什么区别

运行效果

代码行数较多，请点击查看

<html>
<head>
    <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 5 :

增加

edit 顶折

纠问

接着就是增加功能
1. 准备输入框

输入组件都和 hero4Add 对象通过 v-model 进行了双向绑定。
增加按钮也监听了 add 函数

2. maxId

//用于记录最大id值
var maxId = 5;
//计算最大值
for (var i=0;i<data.heros.length;i++){
if (data.heros[i].id > maxId)
maxId= this.heros[i].id;
}

准备了 maxId，作为自增长键，初始值取当前数据的最大id.

3. add函数

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'}
}
}

运行效果

代码行数较多，请点击查看

<html>
<head>
    <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 6 :

删除

edit 顶折

纠问

1. 增加删除的链接

2. 增加 deleteHero 函数，逻辑很简单，就是遍历所有的hero对象，如果id相同，就删掉。

deleteHero: function (id) {
for (var i=0;i<this.heros.length;i++){
if (this.heros[i].id == id) {
this.heros.splice(i, 1);
break;
}
}
}

注: 方法名是 deleteHero 而不是 delete, 因为 delete 是关键字。。。这个坑

运行效果

代码行数较多，请点击查看

<html>
<head>
    <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 7 :

编辑和更新

edit 顶折

纠问

1. 增加链接

2. 增加用于编辑的 div

3. 增加相关函数

edit: function (hero) {
$("#heroListTable").hide();
$("#div4Update").show();
this.hero4Update = hero;
},
update:function(){
//因为v-model，已经同步修改了，所以只需要进行恢复显示就行了
$("#heroListTable").show();
$("#div4Update").hide();
},
cancel:function(){
//其实就是恢复显示
$("#heroListTable").show();
$("#div4Update").hide();
}

运行效果

代码行数较多，请点击查看

<html>
<head>
    <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

<html>
<head>
    <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://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>

渲染中渲染完成

效果

Vue.js系列教材（十六）- vue-cli 3 教程

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2024-07-30 利用 Vue.js 实现 CRUD

虚心求学

关于前端部分-Vue.js-crud 的提问

1.通过 vue 的循环和双向绑定属性 <tr v-for="h in heroes"> <td class="datarow" :id="h.id></td> </tr> 实现根据数组创建相应的行元素，并对其中的某一列绑定相应的 id ，方便后续判断自增长 id 。 2.根据 JQuery 语句获取最后一个 hero 数据的 id ，后续基于该 id 自增长。 id = $("td.data:last").attr('id') 获取 class = data 的最后一个 td 元素，该 id 即为当前数据最后一个id。这样的好处是，不需要循环比较 heroes 数组每个元素的id，不需要任何遍历。 3.v-on 绑定编辑、删除超链的事件，简写@，并传入当前的 hero 对象作为参数 <a @click="updateHero(h)" href="#nowhere">编辑</a> 传入指定 hero 参数，这个 h 即为 v-for="h in heroes" 中的对象 h。这样子的好处是，处理事件的方法可以很轻松就拿到对象 hero 的 id和其他信息： updateHero(hero){ this.selectedHero = hero; this.name = hero.name; this.hp = hero.hp; this.showTable = false; }, 4.利用 v-if 来动态实现，表格的显示和隐藏，替代 JQuery <table role="editTab" v-if="!showTable" align=center> <table role="heroTab" v-if="showTable" align="center" border="1"> 绑定 Vue 中的数据，shoTable 是一个布尔值，更新表在编辑时显示，而编辑时英雄表格隐藏，二者互斥。控制这个 showTable 变量，即可动态切换这两个表格： showEdit(){ this.showTable = false; }, hideEdit(){ this.showTable = false; },

<html>
    <head>
    <meta http-equiv="Content-Type" content = "text/html;charset=UTF-8" />
    <script src = "jquery.min.js"></script>
    <script src = "vue.min.js"></script>
    <script src = "vue-router.min.js"></script>
    <script src = "fetch.min.js"></script>
    <script src="axios.min.js"></script>	
    </head>
    <style>
	table{
		border-collapse:collapse;
		border-width:0px;
		text-align:center;
	}
	.headline{
		border-width:0;
	}
	.headline td{
		font-weight:bold;
		border-width:0;
	}
    </style>
    <body>
       <div id="app">
	<table role="editTab" v-if="!showTable" align=center>
		<tr>
			<td>名称：</td>
			<td colspan="2"><input v-model.lazy = "name"></td>
		</tr>
		<tr>
			<td>血量：</td>
			<td colspan="2"><input v-model.number.lazy = "hp"></td>
		</tr>
		<tr><td colspan="2" >
		<button @click="updateOk">确认</button>
		<button @click="cancel">取消</button>
		</td></tr>
	</table>

	<table role="heroTab" v-if="showTable" align="center" border="1">
		<tr class="headline">
			<td>英雄名称</td>
			<td>血量</td>
			<td>操作</td>
		</tr>
			<tr v-for="h in heroes" >
			<td>{{h.name}}</td>
			<td>{{h.hp}}</td>
			<td :id="h.id" class="data" ><span style="margin-right:5px"><a @click="updateHero(h)" href="#nowhere">编辑</a> </span><span><a @click="deleteHero(h)" href="#nowhere">删除</a></span></td>
		</tr>
		<tr>
			<td>名称：</td>
			<td colspan="2"><input v-model.lazy = "name"></td>
		</tr>
		<tr>
			<td>血量：</td>
			<td colspan="2"><input v-model.number.lazy = "hp"></td>
		</tr>
		<tr><td colspan="3"><button @click="addHero">增加</button></td></tr>
	</table>
      </div>

    <script>
	let data = {
		heroes:[{ id: 0, name: '盖伦', hp: 318},
        		 { id: 1, name: '提莫', hp: 320},
       		 { id: 2, name: '安妮', hp: 419},
      		 { id: 3, name: '死歌', hp: 325},
       		 { id: 4, name: '米波', hp: 422}],
		selectedHero:undefined,
		name:'',
		hp:'',
		showTable:true,
		};
	var vue = new Vue( {
		el:"#app",
		data:data,
		methods:{
			addHero:function(){
				let name = this.name;
				let lastId = this.nextId();
				if(!name||name.trim()=="")
					this.name = "Hero#"+lastId;
				if(!this.hp)
					this.hp=0;
				this.heroes.push({id:lastId,hp:this.hp,name:this.name});
				this.name='';
				this.hp = 0;
			},
			deleteHero:function(hero){
				let id = this.heroes.indexOf(hero);
				this.heroes.splice(id,1);
			},
			updateHero(hero){
				this.selectedHero = hero;
				this.name = hero.name;
				this.hp = hero.hp;
				this.showTable = false;
			},
			updateOk(){
				let h = this.selectedHero;
				h.name = this.name;
				h.hp = this.hp;
				this.cancel();
			},
			cancel(){
				this.name = "";
				this.hp = 0;
				this.showTable = true;
			},
			nextId:function(){
				let id = 0;
				id = $("td.data:last").attr('id')
				id = parseInt(id);
				if(id!=0&&!id||Number.isNaN(id))
					return 0;
				return parseInt(id)+1;
			}
		
		},watch:{
				hp:function(val){
					if(!val||Number.isNaN(parseFloat(val)))
						val = 0;
					this.hp = val;
				}
			
			}

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

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2023-09-13 站长的取消无效

旧时亭台阁

关于前端部分-Vue.js-crud 的提问

点击编辑，修改后，再点击取消，发现数据还是被更改了。修复后的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://how2j.cn/study/vue.min.js"></script>
    <style>
        div#app {
            margin: 20px auto;
            width: 400px;
            padding: 20px;
        }
        table {
            border-collapse: collapse;
        }
        td {
            border: 1px solid gray;
        }
    </style>
</head>
<body>
    <div id="app">
        <table v-if="!showUpdate">
            <thead>
                <tr>
                    <th>英雄名称</th>
                    <th>血量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="hero in heroes">
                    <td>{{ hero.name }}</td>
                    <td>{{ hero.hp }}</td>
                    <td>
                        <a href="javascript:void(0);" @click="deleteHero(hero.id);">删除</a>
                        <a href="javascript:void(0);" @click="edit(hero);">编辑</a>
                    </td>
                </tr>

                <tr>
                    <td colspan="3">
                        英雄名称：<input type="text" v-model="hero4Add.name" /><br/>
                        血量：<input type="number" v-model="hero4Add.hp" /><br/>
                        <button @click="add">增加</button>
                    </td>
                </tr>
            </tbody>
        </table>

        <div v-if="showUpdate">
            <input type="hidden" v-model="hero4Update.id" />

            英雄名称：<input type="text" v-model="hero4Update.name" /><br/>
            血量：<input type="number" v-model="hero4Update.hp" /><br/>

            <button @click="update">更新</button>
            <button @click="cancel">取消</button>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            heroes: [
                { 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},
            ],
            maxId: 5,
            showUpdate: false,
            hero4Add: {
                id: 0, name: '', hp: '0'
            },
            hero4Update: {
                id: 0, name: '', hp: '0'
            },
            hero4UpdateBak: {}
        },
        methods: {
            add: function (event) {
                this.hero4Add.id = ++this.maxId;
                if (0 === this.hero4Add.name.length) {
                    this.hero4Add.name = 'Hero#' + this.hero4Add.id;
                }
                this.heroes.push(this.hero4Add);
                this.hero4Add = { id: '0', name: '', hp: '0' };
            },
            deleteHero: function (id) {
                this.heroes = this.heroes.filter(o => o.id !== id);
            },
            edit: function (hero) {
                this.hero4Update = Object.assign({}, hero);
                this.showUpdate = true;
            },
            update: function () {
                let hero = this.heroes.filter(o => o.id === this.hero4Update.id)[0];
                Object.assign(hero, this.hero4Update);
                this.showUpdate = false;
            },
            cancel: function () {
                this.showUpdate = false;
            }
        }
    })
</script>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2021-12-23 对站长代码做了优化

小原

关于前端部分-Vue.js-crud 的提问

使用了vue+axios,数据单独分开放更新跳转也做了优先对增删改做了优化运行前请在style中添加样式 .active{ display: none; }

<div id="app">
        <table id="heroListTable">
            <thead>
                <tr>
                    <th>英雄名称</th>
                    <th>血量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody :class="num==0 ? 'active' : '' " >
                <tr v-for="(hero,index) in heros">
                    <td>{{hero.name}}</td>
                    <td>{{hero.hp}}</td>
                    <td>
                        <a href="#nowhere" @click="edit(index)">编辑</a>
                        <a href="#nowhere" @click="deleteHero(index)">删除</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" @click="add">增加</button> 
                     </td>                  
                </tr>         
            </tbody>
            <tbody :class="num==1 ? 'active' : '' " >
                <tr>
                    <td><input type="text" v-model='hero4Update.name'></td>
                    <td><input type="text" v-model='hero4Update.hp'></td>
                    <td>
                        <a href="#nowhere" @click="toEdit">修改</a>
                        <a href="#nowhere" @click="editExit">取消</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                //英雄列表
                heros: [],
                //是否显示列表,0不显示
                num:1,
                //添加英雄
                hero4Add: { id: 0, name: '', hp: 0},
                //更新英雄
                hero4Update: { id: 0, name: '', hp: 0}
            },
            created() { //钩子函数
                this.getData()
            },
            methods: {
                toEdit(){  //修改英雄
                    //获得id
                    let id = this.hero4Update.id;
                    //id-1就是该英雄的位置
                    this.heros[id-1] =  this.hero4Update ;
                    //跳回列表
                    this.editExit();
                },
                editExit(){  
                //切换成列表
                this.num = 1;
                this.hero4Update = {}
                },
                edit(index){  //回显修改
                    //切换成更新
                    this.num = 0;
                    this.hero4Update = this.heros[index];
                },
                deleteHero(index){//删除英雄
                   //根据下标删除
                    if(confirm("是否确认删除?")){
                        this.heros.splice(index,1)
                    }
                },
                add(){  //添加数据
                    //获得当前数组
                   let m = this.heros;
                   //新元素id = 最后一个元素的id+1
                   this.hero4Add.id = (m[m.length-1].id)+1;
                   //添加到数组最后
                    this.heros.push(this.hero4Add)
                    //输入框清空
                    this.hero4Add = {}
                },
                getData() {
                    //获取数据,数据单独分开放
                    axios.get('data.json')
                        .then(response => {
                            //指向本地数据
                            this.heros = response.data.heros
                        })
                        .catch(error => {
                            console.log(error)
                        })
                }
            }
        });
    </script>

2 个答案

虚心求学
答案时间：2024-07-30

这位兄弟，代码优化的太好了，看起来也很简洁。但我有一点小疑问： 1.我看到你添加数据，判断自增长 id 时，用到以下方法： //获得当前数组 let m = this.heros; //新元素id = 最后一个元素的id+1 this.hero4Add.id = (m[m.length-1].id)+1; 但是这么写会存在一个 bug ，当表格清空了（删除所有行），此时 m.length = 0，m[m.length-1] = m[-1]。也就是 heros 的长度为0，此时数组下标为 -1 就错误了，自然就无法拿到 id 值了。改进方法可以再加个判断，判断数组是否为空，为空则返回id为0，不为空再用你的方法拿id。 2.我看到你通过 axios 获取本地的json文件，那你是如何解决跨域？跨域资源共享（CORS）的问题，好像也不是跨域的问题，我测试的时候，好像是因为浏览器读取本地文件机制的问题，浏览器通常会阻止从 file:// 协议访问的网页向不同源的 file:// 协议请求数据。这个问题我好像解决不了，各位兄弟是怎么解决 axios 读取本地json文件的问题的？报错信息如下：

代码超过 5行，点击查看

小原
答案时间：2021-12-23

以下是数据部分 data.json

代码超过 5行，点击查看

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2021-07-05 vue.js 不是可以取代 jQuery吗，这个demo的做法其实没有完全体现vue的强大之处把，还是用到了很多 jQuery 的知识

2020-07-16 我真是笨死了，删除那块整了快三个小时，硬是不知道自己错哪了

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 9 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-Vue.js-crud 的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图