vue的增删改查(简单版)

Posted maliyaya

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue的增删改查(简单版)相关的知识,希望对你有一定的参考价值。

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

 

以上是关于vue的增删改查(简单版)的主要内容,如果未能解决你的问题,请参考以下文章

vue的增删改查

vue简单的增删查

PHP怎么实现字符串的增删改查

Vue实现数据增删改查

vue的增删改查

vue的增删改查