<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue-2.5.13.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
position: relative;
}
/* 实现任意无宽高盒子居中显示 */
#app {
position: absolute;
left: 50%;
top: 100px;
transform: translateX(-50%);
}
.box {
width: 500px;
height: 40px;
background-color: #ccc;
display: inline-block;
text-align: center;
line-height: 40px;
border: 1px solid #aaa;
box-sizing: border-box;
border-bottom: none;
}
.tb {
width: 500px;
text-align: center;
border-collapse: collapse;
border-color: #ccc;
}
</style>
</head>
<body>
<div id="app">
<div class="box">
<label for="id">
ID:
<input type="text" id="id" v-model="id">
</label>
<label for="name">
name:
<input type="text" id="name" v-model="name">
</label>
<input type="button" value="add" @click="addClick">
</div>
<table border="1" cellspacing="0" class="tb">
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<!-- 绑定的事件是可以传参数的，这里传入需要删除的对象id -->
<a href="javascript:;" @click.prevent="delClick(item.id)">del</a>
</td>
</tr>
</table>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
id: "",
name: "",
list: [{
id: 1,
name: 'tony',
ctime: new Date()
},
{
id: 2,
name: 'stark',
ctime: new Date()
}
]
},
methods: {
addClick() {
// 1.获取表单数据
// 2.组织出一个对象
// 3.将对象添加到data中（不需要重新渲染页面）
let item = {
id: this.id,
name: this.name,
ctime: new Date()
};
if ((this.id != "") && (this.name != "")) {
this.list.push(item);
}
// 4.最后将表单清空
this.id = this.name = "";
},
delClick(id) {
// 1.根据id找到索引（循环查找）
// 2.调用数组的 splice方法删除
this.list.filter((item, index) => {
if (item.id == id) {
this.list.splice(index, 1);
return true;
}
});
}
}
});
</script>
</body>
</html>

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

  1. Vue 增删改查 demo

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. vue增删改查

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. mongo客户端mongo VUE增删改查

    一.先创建一张mongo表,右击已创建的数据库test,点击addcollection.. 输入Collection Name,点击ok: 二.在创建的表中新增列与数据,右击表选择Insert doc ...

  4. vue实现增删改查（内附源代码）

    VUE+Element实现增删改查 @ 目录 VUE+Element实现增删改查 前言 实验步骤 总结: 源代码 前言 &最近因为一些原因,没有更博客,昨天老师布置了一个作业,用vue实现增删 ...

  5. JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查）

    前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue ...

  6. vue实现对表格数据的增删改查

    在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...

  7. vue的增删改查

    我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行: list: [ { username: 'aaaaa', email: '123@qq.com', sex: '男', pr ...

  8. 关于vue的增删改查操作

    利用vue也可以实现数据的增删改查,只是未涉及到数据库,只是在浏览器页面中进行操作. 将datas数组中的数据循环输出: 再增加一行,用于保存新数据,编辑数据后保存: 此时,数据已经呈现出来,开始进行 ...

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

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

随机推荐

  1. postgresql 创建gin索引

    1.创建gin类型的索引 postgresql 创建gin索引遇到的问题:1.ERROR: operator class "gin_trgm_ops" does not exist ...

  2. 关于使用echarts走过的坑（同grid多图、多轴系列）

    相信大家在工作中,经常会用到echarts,今天我说下我在工作中浪费时间较长的坑 先来看看我的终极需要实现的图吧: 相信以上效果对于常用的小伙伴来说并不困难, 在此我只说option的配置,关于数据, ...

  3. C#异步方法

      Task MainTask;   MainTask = Task.Factory.StartNew(() =>             { //耗时的异步逻辑 });

  4. wechat-plus 使用node开发微信公众号

    github:https://github.com/liuyinglong/node-wechatnpm:https://www.npmjs.com/package/wechat-plus insta ...

  5. spring boot 给返回值加状态 BaseData

    JavaWeb开发中,需要给前端返回的数据加上一些头部的状态信息,来表示请求成功或失败的状态原因 一.数据添加状态信息 1.新建BaseData public class BaseData<T& ...

  6. zabbix 邮件报警配置

    zabbxi 邮件告警推送有两种方式: 1.使用zabbix服务端的本地邮箱账号发送,邮件名为:user@hostname.localdomain,user为发送邮件的用户,hostname为zabb ...

  7. CAtia_打开提示：许可证过期怎么办

    CAtia_许可证过期怎么办:进计算机管理,点开服务和应用程序,点服务,找到DS License Server,在启动此服务的地方点启动,从而开启DS License Server.

  8. Django项目创建

    一.创建方式 1.命令行创建: 2.pycharm创建项目: 二.创建MySQL数据库 三.修改配置文件链接数据库 修改python连接数据库方式 四.Django配置 1.添加app项目 2.修改h ...

  9. VirtualBox虚拟机网络设置说明

    1. 网络接入模式简介    VirtualBox的提供了四种网络接入模式,它们分别是:         1.NAT 网络地址转换模式(NAT,Network Address Translation) ...

  10. 本地jar包添加至Maven仓库

    Maven命令将本地的jar包方放到maven仓库中 //自定义本地的jar包在pom文件的参数 <dependency> <groupId>com.eee</group ...