vue中this.$set的用法

之前了解這個(gè)方法的時(shí)候枢里,感覺這一輩子也用不到這個(gè)方法探越,因?yàn)楫?dāng)時(shí)沒有應(yīng)用場景,但是還真有用的時(shí)候??腐螟,我相信你們也有用到時(shí)候愿汰。

從三個(gè)方面給大家說一下這個(gè)this.$set:

1.this.$set實(shí)現(xiàn)什么功能,為什么要用它乐纸?

2.怎么用它衬廷?

3.應(yīng)用場景

1.this.$set實(shí)現(xiàn)什么功能,為什么要用它汽绢?

當(dāng)你發(fā)現(xiàn)你給對象加了一個(gè)屬性吗跋,在控制臺能打印出來,但是卻沒有更新到視圖上時(shí)宁昭,也許這個(gè)時(shí)候就需要用到this.$set()這個(gè)方法了跌宛,簡單來說this.$set的功能就是解決這個(gè)問題的啦。官方解釋:向響應(yīng)式對象中添加一個(gè)屬性积仗,并確保這個(gè)新屬性同樣是響應(yīng)式的疆拘,且觸發(fā)視圖更新。它必須用于向響應(yīng)式對象上添加新屬性斥扛,因?yàn)?Vue 無法探測普通的新增屬性 (比如?this.myObject.newProperty = 'hi')入问,你會發(fā)現(xiàn)vue官網(wǎng)是vue.set,vue.set的用法稀颁,給你們插入連接芬失,怕你們找不到??,我們現(xiàn)在講的這個(gè)this.$set()和它有什么關(guān)系呢匾灶?咱先說this.$set()棱烂,因?yàn)樗麄儌z的區(qū)別就涉及原理問題啦。

2.怎么用它阶女?

搞個(gè)栗子:

1.vue 中寫在<template></template>標(biāo)簽的代碼

2.export default{}中data數(shù)據(jù)


3.點(diǎn)擊按鈕觸發(fā)changeValue方法颊糜,

??調(diào)用方法:this.$set( target, key, value )

?? target:要更改的數(shù)據(jù)源(可以是對象或者數(shù)組)

?? key:要更改的具體數(shù)據(jù)

?? value :重新賦的值

4.在沒有點(diǎn)擊按鈕的時(shí)候,界面是這樣的秃踩,雖然界面沒有顯示出來衬鱼,但是控制臺已經(jīng)打印出來了


5.當(dāng)點(diǎn)擊按鈕的時(shí)候,調(diào)用this.$set方法憔杨,成功顯示第三個(gè)屬性,這就是整個(gè)過程啦??


3.應(yīng)用場景

當(dāng)你需要為對象添加一個(gè)新屬性時(shí)鸟赫,或者你遇到我上邊所說的問題的時(shí)候可以試試這個(gè)方法,具體vue.set和this.$set()的原理和區(qū)別,可以參考這個(gè)vue.set和this.$set()的區(qū)別抛蚤,仔細(xì)看看如果暫時(shí)不懂也沒關(guān)系台谢,先解決問題,會用這個(gè)方法岁经。

可能有說的不好的地方朋沮,如果有什么問題請留言,歡迎大家指正??

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末缀壤,一起剝皮案震驚了整個(gè)濱河市樊拓,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌诉位,老刑警劉巖骑脱,帶你破解...
    沈念sama閱讀 206,378評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異苍糠,居然都是意外死亡叁丧,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2 382
  • 文/潘曉璐 我一進(jìn)店門岳瞭,熙熙樓的掌柜王于貴愁眉苦臉地迎上來拥娄,“玉大人,你說我怎么就攤上這事瞳筏≈神” “怎么了?”我有些...
    開封第一講書人閱讀 152,702評論 0 342
  • 文/不壞的土叔 我叫張陵姚炕,是天一觀的道長摊欠。 經(jīng)常有香客問我,道長柱宦,這世上最難降的妖魔是什么些椒? 我笑而不...
    開封第一講書人閱讀 55,259評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮掸刊,結(jié)果婚禮上免糕,老公的妹妹穿的比我還像新娘。我一直安慰自己忧侧,他們只是感情好石窑,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,263評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著蚓炬,像睡著了一般松逊。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上肯夏,一...
    開封第一講書人閱讀 49,036評論 1 285
  • 那天棺棵,我揣著相機(jī)與錄音楼咳,去河邊找鬼。 笑死烛恤,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的余耽。 我是一名探鬼主播缚柏,決...
    沈念sama閱讀 38,349評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼碟贾!你這毒婦竟也來了币喧?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,979評論 0 259
  • 序言:老撾萬榮一對情侶失蹤袱耽,失蹤者是張志新(化名)和其女友劉穎杀餐,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體朱巨,經(jīng)...
    沈念sama閱讀 43,469評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡史翘,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,938評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了冀续。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片琼讽。...
    茶點(diǎn)故事閱讀 38,059評論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖洪唐,靈堂內(nèi)的尸體忽然破棺而出钻蹬,到底是詐尸還是另有隱情,我是刑警寧澤凭需,帶...
    沈念sama閱讀 33,703評論 4 323
  • 正文 年R本政府宣布问欠,位于F島的核電站,受9級特大地震影響粒蜈,放射性物質(zhì)發(fā)生泄漏顺献。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,257評論 3 307
  • 文/蒙蒙 一薪伏、第九天 我趴在偏房一處隱蔽的房頂上張望滚澜。 院中可真熱鬧,春花似錦嫁怀、人聲如沸设捐。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽萝招。三九已至,卻和暖如春存捺,著一層夾襖步出監(jiān)牢的瞬間槐沼,已是汗流浹背曙蒸。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留岗钩,地道東北人纽窟。 一個(gè)月前我還...
    沈念sama閱讀 45,501評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像兼吓,于是被迫代替她去往敵國和親臂港。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,792評論 2 345

推薦閱讀更多精彩內(nèi)容

  • 主要還是自己看的视搏,所有內(nèi)容來自官方文檔审孽。 介紹 Vue.js 是什么 Vue (讀音 /vju?/,類似于 vie...
    Leonzai閱讀 3,329評論 0 25
  • Vue 實(shí)例 屬性和方法 每個(gè) Vue 實(shí)例都會代理其 data 對象里所有的屬性:var data = { a:...
    云之外閱讀 2,202評論 0 6
  • 前言 記錄平時(shí)學(xué)到的知識浑娜,標(biāo)題寫的大氣一點(diǎn)佑力,也算是給自己一點(diǎn)鼓勵(lì),希望在技術(shù)這條路可以遠(yuǎn)走越遠(yuǎn)筋遭,路越走越寬~ 文中...
    徐國軍_plus閱讀 1,655評論 3 28
  • 深入響應(yīng)式 追蹤變化: 把普通js對象傳給Vue實(shí)例的data選項(xiàng)打颤,Vue將使用Object.defineProp...
    冥冥2017閱讀 4,843評論 6 16
  • 一、了解Vue.js 1.1.1 Vue.js是什么宛畦? 簡單小巧瘸洛、漸進(jìn)式、功能強(qiáng)大的技術(shù)棧 1.1.2 為什么學(xué)習(xí)...
    蔡華鵬閱讀 3,313評論 0 3