(转载)用 VUE.JS 做一套 增删改查 CRUD

https://how2j.cn/k/vuejs/vuejs-crud/1787.html#nowhere

 

工具版本兼容问题
 

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

 步骤 1 : 

CRUD

顶折

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

 步骤 2 : 

效果

顶折

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

 

 步骤 3 : 

分解动作

顶折

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

 步骤 4 : 

查询

顶折

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

运行效果

代码比较复制代码

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

试一下

 步骤 5 : 

增加

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

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

输入组件都和 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'}

}

}

运行效果

代码比较复制代码

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

试一下

 步骤 6 : 

删除

顶折1. 增加删除的链接

<td>

<a href="#nowhere" @click="deleteHero(hero.id)">删除</a>

</td>

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 是关键字。。。 这个坑

运行效果

代码比较复制代码

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

试一下

 步骤 7 : 

编辑和更新

顶折1. 增加链接

<a href="#nowhere" @click="edit(hero)">编辑</a>

2. 增加用于编辑的 div

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

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();

}

运行效果

代码比较复制代码

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

试一下