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

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

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

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

如: this.list = this.list2, 結(jié)果在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表單,但是我們忽略了一個問題,就是當輸入的信息改變的情況下,不點擊搜索,直接點擊分頁控件,提交的將會是新現(xiàn)在搜索框中的搜索條件。這樣就不和邏輯了。

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

data() { return { formData: { timeStart: ’’, timeEnd: ’’, // 分頁數(shù)據(jù) pageNo: 1, pageSize: 10 }, submitForm: { timeStart: ’’, timeEnd: ’’, // 分頁數(shù)據(jù) 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 避免變量賦值后雙向綁定的操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持好吧啦網(wǎng)。

標簽: Vue
相關文章:
主站蜘蛛池模板: 南京租车,南京汽车租赁,南京包车,南京会议租车-南京七熹租车 | 定制防伪标签_防伪标签印刷_防伪标签厂家-510品保防伪网 | 家乐事净水器官网-净水器厂家「官方」 | 青岛球场围网,青岛车间隔离网,青岛机器人围栏,青岛水源地围网,青岛围网,青岛隔离栅-青岛晟腾金属制品有限公司 | 德国进口电锅炉_商用电热水器_壁挂炉_电采暖器_电热锅炉[德国宝] | 钢格板|镀锌钢格板|热镀锌钢格板|格栅板|钢格板|钢格栅板|热浸锌钢格板|平台钢格板|镀锌钢格栅板|热镀锌钢格栅板|平台钢格栅板|不锈钢钢格栅板 - 专业钢格板厂家 | 特种电缆厂家-硅橡胶耐高温电缆-耐低温补偿导线-安徽万邦特种电缆有限公司 | 北京森语科技有限公司-模型制作专家-展览展示-沙盘模型设计制作-多媒体模型软硬件开发-三维地理信息交互沙盘 | 定制液氮罐_小型气相液氮罐_自增压液氮罐_班德液氮罐厂家 | led冷热冲击试验箱_LED高低温冲击试验箱_老化试验箱-爱佩百科 | 猎头招聘_深圳猎头公司_知名猎头公司 | 光泽度计_测量显微镜_苏州压力仪_苏州扭力板手维修-苏州日升精密仪器有限公司 | 大_小鼠elisa试剂盒-植物_人Elisa试剂盒-PCR荧光定量试剂盒-上海一研生物科技有限公司 | PVC地板|PVC塑胶地板|PVC地板厂家|地板胶|防静电地板-无锡腾方装饰材料有限公司-咨询热线:4008-798-128 | 防火阀、排烟防火阀、电动防火阀产品生产销售商-德州凯亿空调设备有限公司 | 烟台条码打印机_烟台条码扫描器_烟台碳带_烟台数据采集终端_烟台斑马打印机-金鹏电子-金鹏电子 | 北京租车公司_汽车/客车/班车/大巴车租赁_商务会议/展会用车/旅游大巴出租_北京桐顺创业租车公司 | 小程序开发公司_APP开发多少钱_软件开发定制_微信小程序制作_客户销售管理软件-济南小溪畅流网络科技有限公司 | 环球电气之家-中国专业电气电子产品行业服务网站! | 卸料器-卸灰阀-卸料阀-瑞安市天蓝环保设备有限公司 | Pos机办理_个人商户免费POS机申请-拉卡拉办理网 | 深圳APP开发_手机软件APP定制外包_小程序开发公司-来科信 | 铜镍-康铜-锰铜-电阻合金-NC003 - 杭州兴宇合金有限公司 | 山东彩钢板房,山东彩钢活动房,临沂彩钢房-临沂市贵通钢结构工程有限公司 | 大米加工设备|大米加工机械|碾米成套设备|大米加工成套设备-河南成立粮油机械有限公司 | 棕刚玉_白刚玉_铝酸钙-锐石新材料| 无味渗透剂,泡沫抑尘剂,烷基糖苷-威海威能化工有限公司 | 螺钉式热电偶_便携式温度传感器_压簧式热电偶|无锡联泰仪表有限公司|首页 | 磨煤机配件-高铬辊套-高铬衬板-立磨辊套-盐山县宏润电力设备有限公司 | 背压阀|减压器|不锈钢减压器|减压阀|卫生级背压阀|单向阀|背压阀厂家-上海沃原自控阀门有限公司 本安接线盒-本安电路用接线盒-本安分线盒-矿用电话接线盒-JHH生产厂家-宁波龙亿电子科技有限公司 | 培训一点通 - 合肥驾校 - 合肥新亚驾校 - 合肥八一驾校 | 小青瓦丨古建筑瓦丨青瓦厂家-宜兴市徽派古典建筑材料有限公司 | 申江储气罐厂家,储气罐批发价格,储气罐规格-上海申江压力容器有限公司(厂) | 慈溪麦田广告公司,提供慈溪广告设计。 | 济南ISO9000认证咨询代理公司,ISO9001认证,CMA实验室认证,ISO/TS16949认证,服务体系认证,资产管理体系认证,SC食品生产许可证- 济南创远企业管理咨询有限公司 郑州电线电缆厂家-防火|低压|低烟无卤电缆-河南明星电缆 | 低合金板|安阳低合金板|河南低合金板|高强度板|桥梁板_安阳润兴 北京租车牌|京牌指标租赁|小客车指标出租 | 黑田精工电磁阀-CAMMOZI气缸-ROSS电磁-上海茂硕机械设备有限公司 | 江苏全风,高压风机,全风环保风机,全风环形高压风机,防爆高压风机厂家-江苏全风环保科技有限公司(官网) | 无硅导热垫片-碳纤维导热垫片-导热相变材料厂家-东莞市盛元新材料科技有限公司 | 深圳市宏康仪器科技有限公司-模拟高空低压试验箱-高温防爆试验箱-温控短路试验箱【官网】 | 美国HASKEL增压泵-伊莱科elettrotec流量开关-上海方未机械设备有限公司 |