VUE增删改查

Posted 2022-12-15 wxyblog

用到了  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>