电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

vue 避免變量賦值后雙向綁定的操作

瀏覽:87日期:2022-11-05 08:20:39

如: this.list = this.list2, 結果在list改變后 list2也改變,這不是我們想要的效果

第一種:

利用 JSON.parse 和 JSON.stringify

this.list= JSON.parse( JSON.stringify(this.list2) )

第二種:

ES6 的解析語法

this.list= { ...this.list2}

this.arr= [...this.arr2]

補充知識:解決vue中v-model綁定的變量賦值給了另一個變量后,兩個變量同時改變

先來看一下問題背景

我們要做一個 搜索+分頁 的功能,使用vue

我們將分頁控件綁定了點擊事件,點擊后提交v-model綁定的formData表單,但是我們忽略了一個問題,就是當輸入的信息改變的情況下,不點擊搜索,直接點擊分頁控件,提交的將會是新現在搜索框中的搜索條件。這樣就不和邏輯了。

于是我們在data中新加了一個表單的對象 submitForm,只有在點擊 查詢 的時候,v-model綁定的 formData 表單才會賦值給這個對象,而翻頁的時候提交的是 submitForm 。這樣就解決了這個問題。

data() { return { formData: { timeStart: ’’, timeEnd: ’’, // 分頁數據 pageNo: 1, pageSize: 10 }, submitForm: { timeStart: ’’, timeEnd: ’’, // 分頁數據 pageNo: 1, pageSize: 10 }, }this.submitForm = this.formData// 用 new也是一樣達不到效果this.submitForm = new Object(this.formData)

但是!!!

submitForm 竟然跟著變了

這是因為在Object賦值的時候,傳遞的不是值,而是引用,他們指向了同一個空間!

解決

第一種:利用 JSON.parse 和 JSON.stringify

this.submitForm = JSON.parse( JSON.stringify(this.formData) )

第二種:ES6 的解析語法

this.submitForm = { ...this.formData }

以上這篇vue 避免變量賦值后雙向綁定的操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 天津货架厂_穿梭车货架_重型仓储货架_阁楼货架定制-天津钢力仓储货架生产厂家_天津钢力智能仓储装备 | 石家庄救护车出租_重症转院_跨省跨境医疗转送_活动赛事医疗保障_康复出院_放弃治疗_腾康26年医疗护送转诊团队 | 北京发电车出租-发电机租赁公司-柴油发电机厂家 - 北京明旺盛安机电设备有限公司 | 车件|铜件|车削件|车床加工|五金冲压件-PIN针,精密车件定制专业厂商【东莞品晔】 | PCB接线端子_栅板式端子_线路板连接器_端子排生产厂家-置恒电气 喷码机,激光喷码打码机,鸡蛋打码机,手持打码机,自动喷码机,一物一码防伪溯源-恒欣瑞达有限公司 假肢-假肢价格-假肢厂家-河南假肢-郑州市力康假肢矫形器有限公司 | 福建珂朗雅装饰材料有限公司「官方网站」 | 铝板冲孔网,不锈钢冲孔网,圆孔冲孔网板,鳄鱼嘴-鱼眼防滑板,盾构走道板-江拓数控冲孔网厂-河北江拓丝网有限公司 | 专业的新乡振动筛厂家-振动筛品质保障-环保振动筛价格—新乡市德科筛分机械有限公司 | 岸电电源-60HZ变频电源-大功率变频电源-济南诚雅电子科技有限公司 | 云杂志网-学术期刊-首页 | 电动不锈钢套筒阀-球面偏置气动钟阀-三通换向阀止回阀-永嘉鸿宇阀门有限公司 | 北京征地律师,征地拆迁律师,专业拆迁律师,北京拆迁律师,征地纠纷律师,征地诉讼律师,征地拆迁补偿,拆迁律师 - 北京凯诺律师事务所 | 托利多电子平台秤-高精度接线盒-托利多高精度电子秤|百科 | 胃口福饺子加盟官网_新鲜现包饺子云吞加盟 - 【胃口福唯一官网】 | 美的商用净水器_美的直饮机_一级代理经销商_Midea租赁价格-厂家反渗透滤芯-直饮水批发品牌售后 | 主题班会网 - 安全教育主题班会,各类主题班会PPT模板 | 档案密集柜_手动密集柜_智能密集柜_内蒙古档案密集柜-盛隆柜业内蒙古密集柜直销中心 | 铝单板_铝窗花_铝单板厂家_氟碳包柱铝单板批发价格-佛山科阳金属 | 热回收盐水机组-反应釜冷水机组-高低温冷水机组-北京蓝海神骏科技有限公司 | 通用磨耗试验机-QUV耐候试验机|久宏实业百科 | 户外环保不锈钢垃圾桶_标识标牌制作_园林公园椅厂家_花箱定制-北京汇众环艺 | 电主轴,车床电磨头,变频制动电机-博山鸿达特种电机 | 膜结构车棚|上海膜结构车棚|上海车棚厂家|上海膜结构公司 | 磁力抛光机_磁力研磨机_磁力去毛刺机-冠古设备厂家|维修|租赁【官网】 | 冷水机-工业冷水机-冷水机组-欧科隆品牌保障 | 风电变桨伺服驱动器-风电偏航变桨系统-深圳众城卓越科技有限公司 | 座椅式升降机_无障碍升降平台_残疾人升降平台-南京明顺机械设备有限公司 | SMC-ASCO-CKD气缸-FESTO-MAC电磁阀-上海天筹自动化设备官网 | 999范文网_优质范文下载写作帮手 | 双杰天平-国产双杰电子天平-美国双杰-常熟双杰仪器 | 电机铸铝配件_汽车压铸铝合金件_发动机压铸件_青岛颖圣赫机械有限公司 | 免联考国际MBA_在职MBA报考条件/科目/排名-MBA信息网 | 真空乳化机-灌装封尾机-首页-温州精灌 | 制样机-密封锤式破碎机-粉碎机-智能马弗炉-南昌科鑫制样 | 中国玩具展_玩具展|幼教用品展|幼教展|幼教装备展 | 旗杆生产厂家_不锈钢锥形旗杆价格_铝合金电动旗杆-上海锥升金属科技有限公司 | 安平县鑫川金属丝网制品有限公司,声屏障,高速声屏障,百叶孔声屏障,大弧形声屏障,凹凸穿孔声屏障,铁路声屏障,顶部弧形声屏障,玻璃钢吸音板 | 陶氏道康宁消泡剂_瓦克消泡剂_蓝星_海明斯德谦_广百进口消泡剂 | 小型玉石雕刻机_家用玉雕机_小型万能雕刻机_凡刻雕刻机官网 | 电缆接头_防水接头_电缆防水接头 - 乐清市新豪电气有限公司 | 高柔性拖链电缆_卷筒电缆_耐磨耐折聚氨酯电缆-玖泰特种电缆 |