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

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

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

瀏覽:88日期: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
相關文章:
主站蜘蛛池模板: 深圳诚暄fpc首页-柔性线路板,fpc柔性线路板打样生产厂家 | 安徽华耐泵阀有限公司-官方网站| 数显恒温油浴-电砂浴-高温油浴振荡器-常州迈科诺仪器有限公司 | 深圳工程师职称评定条件及流程_深圳职称评审_职称评审-职称网 | 杭州ROHS检测仪-XRF测试仪价格-百科 | 聚氨酯复合板保温板厂家_廊坊华宇创新科技有限公司 | 冷却塔风机厂家_静音冷却塔风机_冷却塔电机维修更换维修-广东特菱节能空调设备有限公司 | 驾驶式洗地机/扫地机_全自动洗地机_工业洗地机_荣事达工厂官网 | 南京种植牙医院【官方挂号】_南京治疗种植牙医院那个好_南京看种植牙哪里好_南京茀莱堡口腔医院 尼龙PA610树脂,尼龙PA612树脂,尼龙PA1010树脂,透明尼龙-谷骐科技【官网】 | 数控车床-立式加工中心-多功能机床-小型车床-山东临沂金星机床有限公司 | 电磁流量计厂家_涡街流量计厂家_热式气体流量计-青天伟业仪器仪表有限公司 | 福建自考_福建自学考试网| 旋振筛|圆形摇摆筛|直线振动筛|滚筒筛|压榨机|河南天众机械设备有限公司 | 氧氮氢联合测定仪-联测仪-氧氮氢元素分析仪-江苏品彦光电 | 深圳办公室装修,办公楼/写字楼装修设计,一级资质 - ADD写艺 | 数控专用机床,专用机床,自动线,组合机床,动力头,自动化加工生产线,江苏海鑫机床有限公司 | 西门子代理商_西门子变频器总代理-翰粤百科 | 一技任务网_有一技之长,就来技术任务网 | 华溶溶出仪-Memmert稳定箱-上海协烁仪器科技有限公司 | 莱州网络公司|莱州网站建设|莱州网站优化|莱州阿里巴巴-莱州唯佳网络科技有限公司 | 新疆十佳旅行社_新疆旅游报价_新疆自驾跟团游-新疆中西部国际旅行社 | 污水提升器,污水提升泵,污水提升装置-德国泽德(zehnder)水泵系统有限公司 | 磁力链接搜索神器_BT磁力狗_CILIMAO磁力猫_高效磁力搜索引擎2024 | 济南保安公司加盟挂靠-亮剑国际安保服务集团总部-山东保安公司|济南保安培训学校 | 搪瓷反应釜厂家,淄博搪瓷反应釜-淄博卓耀 | 黑田精工电磁阀-CAMMOZI气缸-ROSS电磁-上海茂硕机械设备有限公司 | 软膜天花_软膜灯箱_首选乐创品牌_一站式天花软膜材料供应商! | 一氧化氮泄露报警器,二甲苯浓度超标报警器-郑州汇瑞埔电子技术有限公司 | 保定市泰宏机械制造厂-河北铸件厂-铸造厂-铸件加工-河北大件加工 | 地源热泵一体机,地源热泵厂家-淄博汇能环保设备有限公司 | 首页|专注深圳注册公司,代理记账报税,注册商标代理,工商变更,企业400电话等企业一站式服务-慧用心 | 工控机-图像采集卡-PoE网卡-人工智能-工业主板-深圳朗锐智科 | RO反渗透设备_厂家_价格_河南郑州江宇环保科技有限公司 | HDPE土工膜,复合土工膜,防渗膜价格,土工膜厂家-山东新路通工程材料有限公司 | 地埋式垃圾站厂家【佳星环保】小区压缩垃圾中转站转运站 | 德国GMN轴承,GMN角接触球轴承,GMN单向轴承,GMN油封,GMN非接触式密封 | 示波器高压差分探头-国产电流探头厂家-南京桑润斯电子科技有限公司 | 打包箱房_集成房屋-山东佳一集成房屋有限公司 | 耐火浇注料-喷涂料-浇注料生产厂家_郑州市元领耐火材料有限公司 耐力板-PC阳光板-PC板-PC耐力板 - 嘉兴赢创实业有限公司 | 贵州科比特-防雷公司厂家提供贵州防雷工程,防雷检测,防雷接地,防雷设备价格,防雷产品报价服务-贵州防雷检测公司 | 水厂自动化|污水处理中控系统|水利信息化|智慧水务|智慧农业-山东德艾自动化科技有限公司 |