<!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. 搭建zookeeper+kafka集群

      搭建zookeeper+kafka集群 一.环境及准备 集群环境:   软件版本: 部署前操作: 关闭防火墙,关闭selinux(生产环境按需关闭或打开) 同步服务器时间,选择公网ntpd服务器或 ...

  2. 合并hive/hdfs小文件

    磁盘: heads/sectors/cylinders,分别就是磁头/扇区/柱面,每个扇区512byte(现在新的硬盘每个扇区有4K) 文件系统: 文件系统不是一个扇区一个扇区的来读数据,太慢了,所以 ...

  3. Redlock（redis分布式锁）原理分析

    Redlock:全名叫做 Redis Distributed Lock;即使用redis实现的分布式锁: 使用场景:多个服务间保证同一时刻同一时间段内同一用户只能有一个请求(防止关键业务出现并发攻击) ...

  4. mybatis入门篇：Mybatis高级查询

    1.ResultMap的association与collection association与collection功能类似,区别是一对一与一对多,这里以association为例. 首先说明一下需求: ...

  5. 使用DatagramSocket和DatagramPacket进行简单的通信

    DatagramSocket此类表示用来发送和接收数据报包的套接字. DatagramPacket此类表示数据报包. package cn.sxt.UdpDemo; import java.io.IO ...

  6. Eclipse导入文件识别不了jsp怎么办

    1.在出现错误代码页开始处加上<%@ page import="java.util.*"%>,把包引进来2.然后右击项目,依次选择Properties->Java ...

  7. MSMQ 队列消息和死信队列

    日志消息 日志队列可以保存你操作过的消息的备份.它的好处是,一但发现前面的操作失败,可以从日志队列中重新创建出原先的消息对象,然后再进行操作. 例如,向远方发送一个消息对象,然后对方返回一个失败的确认 ...

  8. 以time.py为文件名时，调用time包

    以time.py为文件名时,调用time包,会报有什么问题呢,思考一下

  9. php laravel+nginx 除了根目录都报404 解决

    在nginx的配置文件加 location / { try_files $uri $uri/ /index.php?$query_string; } 即可!!!!!!!

  10. Image Storage