如： 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]

補(bǔ)充知識：解決vue中v-model綁定的變量賦值給了另一個(gè)變量后，兩個(gè)變量同時(shí)改變

先來看一下問題背景

我們要做一個(gè) 搜索+分頁 的功能，使用vue

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

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

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也是一樣達(dá)不到效果this.submitForm = new Object(this.formData)

但是！！！

submitForm 竟然跟著變了

這是因?yàn)樵贠bject賦值的時(shí)候，傳遞的不是值，而是引用，他們指向了同一個(gè)空間！

解決

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

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

第二種：ES6 的解析語法

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

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