2023年7月7日发(作者：)

vue项⽬实战中的增、删、改、查现在公司项⽬是做的后台管理系统，那么⽆疑要⽤到增、删、改、查。其实实战⾥的增删改查都要调⽤接⼝，传递参数，⽽很多的dom操作都反⽽不需要了。vue有个很关键的词对增删改查很重要，叫做双向数据绑定。因为你需要不断的传参，传值，接收id，原⽣DOM的操作能不⽤就不⽤，耗性能，还⿇烦。以下是个⼈学习记录，⼤佬批评指正。第⼀：⾸先来说⼀说 增，话不多说，上代码。下⾯为增、删、改页⾯效果下⾯代码是html部分，是⼀个添加功能，就不上效果图了，v-model绑定的数据为新增⾃提点 取 消 确 定 export default { data () { return { input:{ id:'', name:'', address:'', phone:'' } } }, methods: { //新增⾃提点 branchAdd(){ this.$(data => { //这⾥为点击按钮调⽤的接⼝ (); //调⽤成功刷新页⾯更新数据 },{ name:, //传递绑定的参数，注意this指向 address:s, phone:, }); }, }}第⼆：删，这是⼀个表格，最后为删除，点击删除要根据对应⾏的id删除此⾏。点击事件remove()，括号中要传⼊对应的id值，对应列，所以是 methods: { //删除 remove(id){ //括号内要接收上⾯传来的id值 this.$(data => { (); },{ id:id, //传递对应id给后端， }); }, }}第三：改，修改部分，同样是要获取当前⾏的id值，点击事件中通过（这要根据项⽬实际情况），这⾥还有个⼩问题，就是vue中的点击事件可以⽤；进⾏分隔，@click="remove();a();b()"，这⾥可以⼀直串联，调⽤接⼝不⽤加（） 取 消 确 定 data () { return { input:{ id:'', name:'', address:'', phone:'' }, form:{ //修改页⾯input⾥的数据，在这⾥存储⼀下 id:'', name:'', address:'', phone:'' }, } },methods: { //修改 //获取id selectid(id){ //形参接收id this.$id(data => { = //因为需求 = //要根据id获取当前⾏的数据，并且渲染到提⽰框的input中 s = s //这⾥同样是通过双向数据绑定，进⾏传递数据 = //(); },{ id:id //传递对应⾏的id }); },}第四：查，下⾯为搜索功能，效果图如下：其中需要注意参数的转型

搜索methods: {

_orderList(){ //此接⼝与列表接⼝相同 g = true; this.$(data => { ist = data; g = false; }, { orderId:d, //传递对应参数给后台 userId:parseInt(), //部分参数要注意转类型 userName:me, createTime:Time, } ); },}以上就是我所接触的增、删、改、查，希望各位⼤佬批评指正。