利用vue也可以实现数据的增删改查,只是未涉及到数据库,只是在浏览器页面中进行操作。

将datas数组中的数据循环输出:

再增加一行,用于保存新数据,编辑数据后保存:

此时,数据已经呈现出来,开始进行一系列的操作:
1.sava:

通过v-model将在最后一行填写的数据传输到piece中,然后改变this.piece的id,存入datas数组中。

2.deleted:

获得要删除该行的id,利用循环在数组datas中找到与id对应的i,使用数组的splice(i,1)方法,将该行数据删除。

3.editor:

获得要编辑的该行数据,直接把该数据赋给piece,还是利用v-model指令,此时数据会存入最后一行输入框中,可以进行编辑。

4.select:
获得要查看的该行数据,使用this.$Modal.info({.......})可以将该行数据以模拟框的形式输出,进行查看

注意:

在content中,是用``来将数据进行连接的。

完整代码:

<template>
<table>
<thead>
<tr>
<td>username</td>
<td>age</td>
<td>sex</td>
<td>professional</td>
<td>hobby</td>
<td>operation</td>
</tr>
</thead>
<tbody>
<tr v-for="d in datas">
<td>{{ d.username }}</td>
<td>{{ d.age }}</td>
<td>{{ d.sex }}</td>
<td>{{ d.professional }}</td>
<td>{{ d.hobby }}</td>
<td>
<button @click="editor(d)">编辑</button>
<button @click="deleted(d.id)">删除</button>
<button @click="select(d)">查看</button>
</td>
</tr>
<tr>
<td>
<input type="text" placeholder="username" v-model="piece.username">
</td>
<td>
<input type="text" placeholder="age" v-model="piece.age">
</td>
<td>
<input type="text" placeholder="sex" v-model="piece.sex">
</td>
<td>
<input type="text" placeholder="professional" v-model="piece.professional">
</td>
<td>
<input type="text" placeholder="hobby" v-model="piece.hobby">
</td>
<td>
<button @click="save()">保存</button>
</td>
</tr>
</tbody>
</table>
</template> <script>
export default {
data () {
return {
datas: [
{id: 1, username: '张三', age: 20, sex: '男', professional: '计算机', hobby: '打篮球'},
{id: 2, username: '李四', age: 21, sex: '男', professional: 'web', hobby: '羽毛球'},
{id: 3, username: '王五', age: 23, sex: '男', professional: 'python', hobby: '乒乓球'},
{id: 4, username: '如花', age: 19, sex: '女', professional: 'java', hobby: '学习'},
{id: 5, username: '似玉', age: 22, sex: '女', professional: '软件', hobby: '看书'}
],
piece: {
id: 0, username: '', age: '', sex: '', professional: '', hobby: ''
}
}
},
methods: {
editor (d) {
this.piece = d;
},
deleted (id) {
for(var i =0;i<this.datas.length;i++){
if(this.datas[i].id == id){
this.datas.splice(i,1);
break;
}
}
},
select (d) {
this.$Modal.info({
title: '用户信息',
content: `username: ${d.username}<br>age: ${d.age}<br>sex: ${d.sex}<br>professional: ${d.professional}<br>hobby: ${d.hobby}`
})
},
save () {
if(this.piece.id == 0){
this.piece.id = this.datas.length + 1;
this.datas.push(this.piece);
}
this.piece = {id: 0, username: '', age: '', sex: '', professional: '', hobby: ''};
}
}
}
</script> <style>
table tr td{
border: 2px solid black;
padding: 5px;
font-size: 15px;
}
table{
border-collapse: collapse;
margin: 0 auto;
}
thead tr td{
font-weight: bold;
font-size: 18px;
}
button{
font-size: 15px;
padding: 5px;
font-weight: 100;
}
</style>

关于vue的增删改查操作的更多相关文章

  1. webpack4+express+mongodb+vue 实现增删改查

    在讲解之前,我们先来看看效果如下所示: 1)整个页面的效果如下: 2) 新增数据效果如下: 3) 新增成功如下: 4) 编辑数据效果如下: 5) 编辑成功效果如下: 6) 删除数据效果如下: 7) 删 ...

  2. mongoVUE的增删改查操作使用说明

    mongoVUE的增删改查操作使用说明 一. 查询 1. 精确查询 1)右键点击集合名,再左键点击Find 或者直接点击工具栏上的Find 2)查询界面,包括四个区域 {Find}区,查询条件格式{& ...

  3. (转)SQLite数据库增删改查操作

    原文:http://www.cnblogs.com/linjiqin/archive/2011/05/26/2059182.html SQLite数据库增删改查操作 一.使用嵌入式关系型SQLite数 ...

  4. 详谈easyui datagrid增删改查操作

    转自:http://blog.csdn.net/abauch_d/article/details/7734395 前几天我把easyui dadtagrid的增删改查的实现代码贴了出来,发现访问量达到 ...

  5. PHP程序中使用PDO对象实现对数据库的增删改查操作的示例代码

    PHP程序中使用PDO对象实现对数据库的增删改查操作(PHP+smarty) dbconn.php <?php //------------------------使用PDO方式连接数据库文件- ...

  6. 浅谈dataGridView使用,以及画面布局使用属性,对datagridview进行增删改查操作,以及委托使用技巧

        通过几天的努力后,对datagridview使用作一些简要的介绍,该实例主要运用与通过对datagridview操作.对数据进行增删改查操作时,进行逻辑判断执行相关操作.简单的使用委托功能,实 ...

  7. 05_Elasticsearch 单模式下API的增删改查操作

    05_Elasticsearch 单模式下API的增删改查操作 安装marvel 插件: zjtest7-redis:/usr/local/elasticsearch-2.3.4# bin/plugi ...

  8. JDBC连接数据库及增删改查操作

    什么是JDBC?Java语言访问数据库的一种规范,是一套APIJDBC (Java Database Connectivity) API,即Java数据库编程接口,是一组标准的Java语言中的接口和类 ...

  9. Elasticsearch 单模式下API的增删改查操作

    <pre name="code" class="html">Elasticsearch 单模式下API的增删改查操作 http://192.168. ...

随机推荐

  1. request:getParameter getAttribute

    转载自:http://www.cnblogs.com/shaohz2014/p/3804656.html 在浏览器地址输入,表示传入一个参数test,值为123 http://localhost:88 ...

  2. nginx 模块讲解

    1. 通用配置选项: --prefix=<path>          指定Nginx的安装路径,所有其他的路径都要依赖于该选项 --sbin-path=<path>     ...

  3. webservice wsdl接口配置与调用

    准备包 WebRoot/WEB-INF/lib/axis2-adb-1.6.2.jarWebRoot/WEB-INF/lib/axis2-ant-plugin-1.6.2.jarWebRoot/WEB ...

  4. 学习了初级的Python

    今天傍晚完成了Code Academy上Python的所有练习,感觉Python的原力在我身体里流淌......下面要学习一些进阶的东西.之前Zhi哥跟我说Python比较简单,我还不太信.其实早在四 ...

  5. rsync+inotify 实现资源服务器的同步目录下的文件变化时,备份服务器的同步目录更新,以资源服务器为准,去同步其他客户端

    测试环境: 资源服务器(主服务器):192.168.200.95 备份服务器(客户端):192.168.200.89 同步目录:/etc/test 同步时使用的用户名hadoop密码12345 实验目 ...

  6. C# WinForm dataGridView 技巧小结

    1.不显示第一个空白列RowHeaderVisible属性设置为false 2.点击cell选取整行SelectinModel属性FullRowSelectRowSelectinModel属性设置或用 ...

  7. 【bfs】抓住那头牛

    [题目] 农夫知道一头牛的位置,想要抓住它.农夫和牛都位于数轴上,农夫起始位于点N(0≤N≤100000),牛位于点K(0≤K≤100000).农夫有两种移动方式: 1.从X移动到X-1或X+1,每次 ...

  8. GET和POST两种基本请求方法的区别(转载)

    get与post请求的区别: 通常回答: GET在浏览器回退时是无害的,而POST会再次提交请求. GET产生的URL地址可以被Bookmark,而POST不可以. GET请求会被浏览器主动cache ...

  9. selenium+python自动化97--unittest参数化(paramunittest)

    前言 paramunittest是unittest实现参数化的一个专门的模块,可以传入多组参数,自动生成多个用例 前面讲数据驱动的时候,用ddt可以解决多组数据传入,自动生成多个测试用例.本篇继续介绍 ...

  10. Servlet 处理请求

    一:Servlet 处理请求也是通过request来进行处理,类似于python. get请求通过request.getparameter("key");key为前端传过来的key ...