VUE增删改查

用到了  v-model  @click v-show v-for 数组常用API

核心  v-model 双向进行数据绑定

 

 

<template>
  <div>
    <div>
      <input type="text" placeholder="发布" v-model="obj.user" />
      <input type="text" placeholder="年龄" v-model="obj.age" />
      <input type="text" placeholder="性别" v-model="obj.sex" />
      <span>
        <button @click="add()">增加</button>
      </span>
    </div>
    <table>
      <thead>
        <tr>
          <td>序列号</td>
          <td>姓名</td>
          <td>年龄</td>
          <td>性别</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in titles" :key="index">
          <td>{{item.id}}</td>
          <td>{{item.user}}</td>
          <td>{{item.age}}</td>
          <td>{{item.sex}}</td>
          <td>
            <span class="edit" @click="editData(item)">编辑</span>
            <span class="delete" @click="del(index)">删除</span>
          </td>
        </tr>
      </tbody>
    </table>

    <div class="layer" v-show="flag">
      <div class="mask">
        <div class="title">
          编辑
          <span>x</span>
        </div>
        <div class="content">
          <input type="text" placeholder="发布" v-model="edit.user" />
          <input type="text" placeholder="年龄" v-model="edit.age" />
          <input type="text" placeholder="性别" v-model="edit.sex" />
          <button @click="updata()">更新</button>
          <button @click="flag=false">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      find: "find",
      flag: false,
      obj: {
        user: "",
        age: "",
        sex: "",
        id: ""
      },
      titles: [
        {
          user: "wxy",
          age: "18",
          sex: "0",
          id: "01"
        },
        {
          user: "wxy2",
          age: "20",
          sex: "0",
          id: "02"
        },
        {
          user: "wxy3",
          age: "19",
          sex: "1",
          id: "03"
        }
      ],
      edit: {}
    };
  },
  methods: {
    add() {
      //增加数据
      //动态id
      var _id =
        Math.max.apply(
          null,
          this.titles.map(v => {
            return v.id;
          })
        ) + 1;
      //判断增加数据是否全部为空
      if (!this.obj.user || !this.obj.age || !this.obj.sex) return;
      //将添加的数据，增加到数组中
      this.titles.push({
        user: this.obj.user,
        age: this.obj.age,
        sex: this.obj.sex,
        id: _id
      });
      //添加完成后，将输入框清空
      this.obj = {
        user: "",
        age: "",
        sex: "",
        id: ""
      };
    },
    //删除数据
    del(index) {
      //点击删除后，将删除数据的下标传入，进行删除
      this.titles.splice(index, 1);
    },
    //编辑数据
    editData(item) {
      //将要编辑的数据传入
      //编辑层打开，显示
      this.flag = true;
      //将要编辑的数据赋值给this.edit，绑定this.edit
      this.edit = {
        user: item.user,
        age: item.age,
        sex: item.sex,
        id: item.id
      };
    },
    //更新数据
    updata() {
      //点击更新按钮后触发，将用对象中的ID值来判断，选中更改的对象，并将更改后的对象重新给到this.titles
      for (var i = 0; i < this.titles.length; i++) {
        if (this.titles[i].id == this.edit.id) {
          this.titles[i] = this.edit;
          this.flag = false;
        }
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
table {
  margin: auto;
  border-collapse: collapse;
}
table td {
  border: 1px solid black;
}
</style>