vue实现用户增删改，小案例

视频→ 点击预览视频

需求↓：

在页面data中定义arr数据，将数据渲染到页面的表格中，在表格上方定义我们的
表单标签，并且对表单的数据进行双向数据绑定
点击添加按钮，将表单的数据添加到arr数组中，数据驱动页面。
点击删除，删掉当前行数据
点击修改，回填数据到表单中
再次点击添加/修改 将当前行数据修改并且渲染到页面。
数据驱动页面

思路↓：

添加功能：通过获取data中的数据，通过push添加
删除功能：通过获取data中的数据，通过splice删除一条
编辑功能：点击编辑按钮，我们定义一个值，例：falg:false,点击编辑触发方法
修改falg值为true （判断时falg==true就是修改否则就是添加）
我们再次点击添加/修改。这时候（判断时falg==true就是修改否则就是添加）
实现添加或修改。
获取当前行数据我们可以通过findIndex 获取当前行数据。

效果图↓

代码↓

<template>
  <div class="home">
    <p>
      姓名：<input type="text" v-model="obj.name">
    </p>
    <p>年龄: <input type="text" v-model="obj.age"> </p>
    <p>性别：
      <select name="" id="" v-model="obj.sex">
        <option value="请选择">请选择</option>
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </p>
    <p>
      <button @click="add(obj)">添加/修改</button>
    </p>
    <!-- 表格部分 -->
    <table border="1">
      <tr>
        <td>序号</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>操作</td>
      </tr>
      <tr v-for="val, i in arr" :key="i">
        <td>{{ i + 1 }}</td>
        <td>{{ val.name }}</td>
        <td>{{ val.age }}</td>
        <td>{{ val.sex }}</td>
        <td>
          <button @click="arr.splice(i, 1)">删除</button>
          <button @click="edit(val)">修改</button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'HomeINdex',
  data() {
    return {
      // 双向绑定数据
      obj: {
        name: '',
        age: '',
        sex: '请选择'
      },
      // 用来渲染
      arr: [
        {
          id: 1,
          name: '小明',
          age: '18',
          sex: '男'
        },
        {
          id: 2,
          name: '小红',
          age: '18',
          sex: '女'
        },
        {
          id: 3,
          name: '小白',
          age: '20',
          sex: '男'
        },
      ],
      // 值 看是否修改
      flag: false
    }
  },
  methods: {
    // 添加的方法
    add(obj) {
      let i = this.arr.findIndex((v) => v.id == this.obj.id)
      // console.log(i);
      // console.log(this.flag);
      // console.log(obj);
      if (this.flag == true) {
        // console.log(i);
        this.arr[i] = { ...obj }
      } else {
        this.arr.push({ ...this.obj })
      }
      this.obj = {
        name: '',
        age: '',
        sex: '请选择'
      }
      this.flag = false
    },
    // 修改
    edit(v) {
      this.flag = true
      this.obj = { ...v }
    }
  }
}
</script>

<style>

</style>