vue3.0自学之路总结第二篇(增删改查)

上一篇说了vue的基本创建和启动，这篇文章主要讲，vue的固定数据（data里的假数据）实现增删改查功能：

首先最简单的就是删除：

思路：删除是在现在的表单,根据id删除指定的内容，最后形成新的表单

data() {

    //这里存放数据

    return {

      kfList: [

        {

          id: 1,

          cname: "xxx有限公司",

          name: "老孙",

          tel: "188888888888",

          address: "xx科技",

          date1: "2019-12-01",

          date2: "2020-01-01"

        },

        {

          id: 2,

          cname: "xxx有限公司",

          name: "老郭",

          tel: "17777777777",

          address: "xxx城",

          date1: "2018-05-30",

          date2: "2018-11-30"

        },

      ]

    };

  },

  methods: {

    // 获取需要渲染到页面中的数据

    setSlist(arr) {

        this.kfList = JSON.parse(JSON.stringify(arr));

    },

    delList(index){

      this.kfList.splice(index, 1);//当前数据删除，依据传入的index来删除

      this.setSlist(this.kfList);//渲染之后的数据代替原始数据

    },

}

html代码：

kfList是我现在为操作的原始数据

setSlist是我操作之后重新渲染之后的数据

@click=>绑定点击事件(删除需要传值index)

添加思路：添加是在原始数据上新增数据

1.写一个添加的页面，在添加链接上写一个判断方法=>点击添加出现添加页面，点击添加页面中的取消或确定之后新页面都消失，新页面有新的数据存储地方，当点击确定添加成功之后才加入到了数据表里面

2.添加页面需要绑定新数据

html代码：<button class="btn_add" @click="changeOverlay()">添加</button>

data{

return{

isActive:false,//默认隐藏

//添加页面的数据

      selectedlist: {

          id: 0,

          cname: "",

          name: "",

          tel: "",

          address: "",

          date1: "",

          date2: ""

      },

}

}

methods: {

 //显示/隐藏

    changeOverlay(){

      this.isActive = !this.isActive;

    },

addList() {

    if (this.selectedlist.id == 0) {

        //设置当前新增行的id

        this.selectedlist.id = this.kfList.length + 1;

        if (this.selectedlist.cname === '') 

        {

            alert("公司名称不能为空!");

        }

        else if(this.selectedlist.name === ''){

          alert("姓名不能为空!");

        }

        else if(this.selectedlist.tel === ''){

          alert("电话不能为空!");

        }

        else if(this.selectedlist.address === ''){

          alert("地址不能为空!");

        }

        else if(this.selectedlist.date1 === ''){

          alert("下单日期不能为空!");

        }

        else if(this.selectedlist.date2 === ''){

          alert("到期日期不能为空!");

        }

        else

        {

            this.kfList.push(this.selectedlist);

        }

      }

//添加完成需要把添加数据表单的数据还原

        this.selectedlist = {id: 0,cname: "",name: "",tel: "",address: "",date1: "",date2: ""};

        this.isActive = false;

    },

}

其实改和查是一个效果，只是改有修改功能

思路：改实现了数据变换，写一个修改页面，获取当前id的数据，在修改页面确定之后形成新数据页面

html代码：

vue：

以上基本就是vue固定数据的增删改查，没有接口...

接口大家需要去了解axios

最后

以上就是粗暴马里奥为你收集整理的vue3.0自学之路总结第二篇(增删改查)的全部内容，希望文章能够帮你解决vue3.0自学之路总结第二篇(增删改查)所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。