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>