欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue data變量相互賦值后被實(shí)時(shí)同步的解決步驟

 更新時(shí)間：2020年08月05日 09:33:06   作者：岑農(nóng)耕 - 深圳  
這篇文章主要介紹了vue data變量相互賦值后被實(shí)時(shí)同步的解決步驟，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

數(shù)據(jù)結(jié)構(gòu)是這樣子的

data() {
   return {
    title: 'web前端 this data變量相互賦值后被實(shí)時(shí)同步問(wèn)題',
    val_1: 'vue',
    val_2: ''
   }
}

問(wèn)題源：

我們?cè)趏nload()把val_1 賦給 val_2 (或者在用戶click時(shí)更改也都會(huì)出現(xiàn)這個(gè)問(wèn)題)

onload() {
 this.val_2 = this.val_1;
}

解決方法：

我們?cè)谕ㄟ^(guò)JavaScript把 “val_1” 轉(zhuǎn)換成字符串類型，再JSON.parse，最后再賦給 “val_2” 就解決了

onload() {
 this.val_2 = JSON.parse(JSON.stringify(this.val_1));
}

補(bǔ)充知識(shí)：vue定義的全局變量在一個(gè)方法賦值過(guò)后在另一個(gè)方法中是空

在學(xué)習(xí)vue的過(guò)程中，發(fā)現(xiàn)了許多小的問(wèn)題，例如：我定義一個(gè)全局變量a，為了可以在下面定義的方法中一直取得到這個(gè)全局變量，在方法中我添加了一個(gè)jquery的click方法，在這個(gè)方法里面用this.a = b(自定義的一個(gè)變量)；然后到另一個(gè)方法中去使用這個(gè)全局變量a，發(fā)現(xiàn)根本沒(méi)有進(jìn)行賦值，還是原來(lái)的全局變量的值。

原因如下：因?yàn)閏lick函數(shù)使this的指向發(fā)生了變化。所以要在click函數(shù)的外面添加一句：

var self = this;

然后在click函數(shù)里面為全局變量賦值要寫：

self.a = b;

這樣就不會(huì)改變this的指向了！

以上這篇vue data變量相互賦值后被實(shí)時(shí)同步的解決步驟就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • 在使用vuex的時(shí)候出現(xiàn)commit未定義錯(cuò)誤的解決

    在使用vuex的時(shí)候出現(xiàn)commit未定義錯(cuò)誤的解決

    這篇文章主要介紹了在使用vuex的時(shí)候出現(xiàn)commit未定義錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-01-01
  • 在vue項(xiàng)目中引入highcharts圖表的方法(詳解)

    在vue項(xiàng)目中引入highcharts圖表的方法(詳解)

    下面小編就為大家分享一篇在vue項(xiàng)目中引入highcharts圖表的方法(詳解)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助
    2018-03-03
  • vue結(jié)合g6實(shí)現(xiàn)樹(shù)級(jí)結(jié)構(gòu)(compactBox?緊湊樹(shù))

    vue結(jié)合g6實(shí)現(xiàn)樹(shù)級(jí)結(jié)構(gòu)(compactBox?緊湊樹(shù))

    本文主要介紹了vue結(jié)合g6實(shí)現(xiàn)樹(shù)級(jí)結(jié)構(gòu)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-06-06
  • 深入解析Vue中的this.$forceUpdate()的使用

    深入解析Vue中的this.$forceUpdate()的使用

    this.$forceUpdate()?是一個(gè)重要的實(shí)例方法,本文主要介紹了深入解析Vue中的this.$forceUpdate()的使用,具有一定的參考價(jià)值,感興趣的可以了解一下
    2024-07-07
  • element?el-select下拉框選擇失效解決辦法

    element?el-select下拉框選擇失效解決辦法

    el-select即選擇器用于從若干個(gè)候選項(xiàng)中選擇其中一個(gè)(或者多個(gè)),在傳統(tǒng)網(wǎng)頁(yè)開(kāi)發(fā)中選擇器經(jīng)常被稱作下拉框、下拉列表是最常用的表單元素之一,這篇文章主要給大家介紹了關(guān)于element?el-select下拉框選擇失效解決辦法,需要的朋友可以參考下
    2023-08-08
  • vue實(shí)現(xiàn)掃碼功能

    vue實(shí)現(xiàn)掃碼功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)掃碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-01-01
  • vue-cli5搭建vue項(xiàng)目的實(shí)現(xiàn)步驟

    vue-cli5搭建vue項(xiàng)目的實(shí)現(xiàn)步驟

    本文主要介紹了vue-cli5搭建vue項(xiàng)目的實(shí)現(xiàn)步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-05-05
  • Vue+SpringBoot開(kāi)發(fā)V部落博客管理平臺(tái)

    Vue+SpringBoot開(kāi)發(fā)V部落博客管理平臺(tái)

    V部落是一個(gè)多用戶博客管理平臺(tái)。這篇文章主要介紹了Vue+SpringBoot開(kāi)發(fā)V部落博客管理平臺(tái),需要的朋友可以參考下
    2017-12-12
  • Vue 樣式綁定的實(shí)現(xiàn)方法

    Vue 樣式綁定的實(shí)現(xiàn)方法

    學(xué)習(xí) Vue 的時(shí)候覺(jué)得樣式綁定很簡(jiǎn)單，但是使用的時(shí)候總是容易搞暈自己。這篇文章主要介紹了Vue 樣式綁定的實(shí)現(xiàn)方法，感興趣的小伙伴們可以參考一下
    2019-01-01
  • vue使用@scroll監(jiān)聽(tīng)滾動(dòng)事件時(shí)，@scroll無(wú)效問(wèn)題的解決方法詳解

    vue使用@scroll監(jiān)聽(tīng)滾動(dòng)事件時(shí)，@scroll無(wú)效問(wèn)題的解決方法詳解

    這篇文章主要介紹了vue使用@scroll監(jiān)聽(tīng)滾動(dòng)事件時(shí)，@scroll無(wú)效問(wèn)題的解決方法,結(jié)合實(shí)例形式分析了@scroll監(jiān)聽(tīng)滾動(dòng)事件無(wú)效問(wèn)題的原因及相應(yīng)的解決方法,需要的朋友可以參考下
    2019-10-10

最新評(píng)論