vue的增删改查（简单版）
2024-10-21 09:22:39
<template>
<div class="about">
<div>
<input type="text" placeholder="留言人" v-model="obj.name" />
<input type="text" placeholder="内容" v-model="obj.con" />
<input type="date" v-model="obj.time" />
<button @click="add">添加</button>
</div>
<table border="1">
<tr v-for="(item,index) in infos" :key="index">
<!-- index是下标，获取索引的值 索引是从0 开始的所以加一 -->
<td>{{index+1}}{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.con}}</td>
<td>{{item.time}}</td>
<td>
<button @click="edit(item)">编辑</button>
<button @click="del(index)">删除</button>
</td>
</tr>
</table>
<div v-show="flag">
<!-- v-show 显示隐藏 单纯的添加样式 v-if 销毁整个dom -->
<label for>姓名</label>
<input type="text" v-model="editdetail.name" />
<br />
<label for>内容</label>
<input type="text" v-model="editdetail.con" />
<br />
<label for>时间</label>
<input type="text" v-model="editdetail.time" />
<br />
<button @click="change()">更新</button>
<button @click="flag=false">取消</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
flag: false, //弹窗的显示隐藏
editdetail: {},
obj: {
name: "",
con: "",
time: "",
},
infos: [{ name: "张三", con: "吃饭了吗", time: "2020-06-14", id: 1 }]
};
},
methods: {
//增
add() {
// 必填项和非必填 判断
//获取id 连接数据库，方法接收点击事件传过来的id
if (!this.obj.name || !this.obj.con || !this.obj.time) return;
var _id = Math.max( ...this.infos.map(function(v) {
return v.id;
})
) + 1;
//追加 v-model配合双向绑定
this.infos.push({
name: this.obj.name,
con: this.obj.con,
time: this.obj.time,
id: _id
});
//id自动递增 获取索引 新东西
// 清空input的值 校验处理
this.obj = {};
// (this.obj.name = ""), (this.obj.con = ""), (this.obj.time = "");
},
//删除组件，必须获取对应的下标索引
del(index) {
this.infos.splice(index, 1); //三个值 index从哪里才是 1删除一条数据
},
//编辑组件 查 item 循环对应的每一个值 与他内容一一对应
edit(item) {
//就是显示弹层
// this.editdetail = item;//对象赋值是引用关系
this.flag = true; //弹层
// 为了防止连动，对象赋值是引用关系，原有发生变化是她会随着变化
// 解决办法
this.editdetail = {
name: item.name,
con: item.con,
time: item.time, //重新指向
id: item.id
};
//更新 生拷贝
},
//改
change() {
//数据更新
for (var i = 0; i < this.infos.length; i++) {
if (this.infos[i].id == this.editdetail.id) {
this.infos[i] = this.editdetail;
console.log(this.infos[i].id);
console.log(this.editdetail);
this.flag = false; //弹窗
}
}
}
}
};
</script>
<style >
td {
width: 400px;
}
/*
Map() 循环遍历 有返回值
forEach() 无返回值
...扩展运算符es6 对当前数组进行序列化 就是拿到数组的结果
var _id=Math.max(...this.infos.map(function(item){
return item.id 循环拿到对应的id值
}))+1;
*/
</style>
最新文章
- 【转载】兼容php5，php7的cURL文件上传示例
- Azure Service Febric 笔记：Web API应用
- [日常训练]yayamao的神题
- [QDB] 幽灵分享：QDataSet+TQMSSQLConverter 实战技巧
- floyd算法 poj2253
- 微软成立反网络犯罪中心，工作环境如美剧CSI情景
- windows 7 ssh server for scp
- Android SDK无法更新解决方法
- htm初学笔记
- 更换ios 开发者账号与下载别人的代码 真机调试时注意切换
- 关于maven相互依赖的工程部署问题
- JQ封装图片预加载插件
- AppDir【创建缓存目录】
- 一次lr异常Error: C interpreter run time error: Action.c (17): Error -- memory violation : Exception ACCESS_VIOLATION received问题分析
- WIN10在安装mysql时，出现“The security settings could not be applied to the database because the connection has failed with the following error. Error Nr. 1045
- 1.YAF 的安装
- npm遇到的问题--npm install 执行报错 /bin/git submodule update -q --init --recursive
- 阿里云windows server 2012 TIME_WAIT CLOSE_WAIT
- centos 安装python PIL模块
- C#winform窗体实现对sql server数据库的增删改查