vue中 this.$set的用法詳解

更新時(shí)間：2019年09月06日 08:22:23 作者：yang

這篇文章主要介紹了vue中 this.$set的用法詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

當(dāng)vue的data里邊聲明或者已經(jīng)賦值過(guò)的對(duì)象或者數(shù)組（數(shù)組里邊的值是對(duì)象）時(shí)，向?qū)ο笾刑砑有碌膶傩?，如果更新此屬性的值，是不?huì)更新視圖的。

<template>
 <div id="app">
  <p v-for="item in items" :key="item.id">{{item.message}}</p>
  <button class="btn" @click="handClick()">更改數(shù)據(jù)</button>
 </div>
</template>

<script>
export default {
 name: 'App',
 data () {
  return {
   items: [
        { message: "one", id: "1" },
        { message: "two", id: "2" },
        { message: "three", id: "3" }
      ]
  }
 },
 mounted () {
   this.items[0] = { message:'first',id:'4'} //此時(shí)對(duì)象的值更改了，但是視圖沒(méi)有更新
  // let art = {message:'first',id:"4"}
  // this.$set(this.items,0,art) //$set 可以觸發(fā)更新視圖
 },
 methods: {
  handClick(){
   let change = this.items[0]
   change.message="shen"
   this.$set(this.items,0,change)
  }
 }
}
</script>

<style>

</style>

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

target: 要更改的數(shù)據(jù)源（可以是一個(gè)對(duì)象或者數(shù)組）
key 要更改的具體數(shù)據(jù) （索引）
value 重新賦的值

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue實(shí)現(xiàn)動(dòng)態(tài)控制表格列的顯示和隱藏
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)動(dòng)態(tài)控制表格列的顯示和隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
vue Draggable實(shí)現(xiàn)拖動(dòng)改變順序
這篇文章主要為大家詳細(xì)介紹了vue Draggable實(shí)現(xiàn)拖動(dòng)改變順序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
vue實(shí)現(xiàn)組件跟隨鼠標(biāo)位置彈出效果(示例代碼)
這篇文章主要介紹了vue中實(shí)現(xiàn)組件跟隨鼠標(biāo)位置彈出效果,本文通過(guò)圖文示例代碼相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-02-02
vue-router中 query傳參和params傳參的使用和區(qū)別講解
這篇文章主要介紹了vue-router中 query傳參和params傳參的使用和區(qū)別講解,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-01-01
一文了解Vue 3 的 generate 是這樣生成 render&n
本文介紹generate階段是如何根據(jù)javascript AST抽象語(yǔ)法樹(shù)生成render函數(shù)字符串的,本文中使用的vue版本為3.4.19,感興趣的朋友跟隨小編一起看看吧
2024-06-06
詳細(xì)講解如何創(chuàng)建, 發(fā)布自己的 Vue UI 組件庫(kù)
當(dāng)我們自己開(kāi)發(fā)了一個(gè) _UI Component_, 需要在多個(gè)項(xiàng)目中使用的時(shí)候呢? 我們首先想到的可能是直接復(fù)制一份過(guò)去對(duì)嗎?我們?yōu)槭裁床话l(fā)布一個(gè) UI 組件庫(kù)給自己用呢?下面小編和大家來(lái)一起學(xué)習(xí)下吧
2019-05-05
編寫(xiě)v-for循環(huán)的技巧匯總
這篇文章主要介紹了編寫(xiě)更好的v-for循環(huán)的6種技巧，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-12-12
Vue利用AJAX請(qǐng)求獲取XML文件數(shù)據(jù)的操作方法
在現(xiàn)代Web開(kāi)發(fā)中,從前端框架到后端API的交互是必不可少的一部分,Vue.js作為一個(gè)輕量級(jí)且功能強(qiáng)大的前端框架,支持多種方式與服務(wù)器通信,從而獲取或發(fā)送數(shù)據(jù),本文將詳細(xì)介紹如何在Vue.js項(xiàng)目中使用AJAX請(qǐng)求來(lái)獲取XML格式的數(shù)據(jù),需要的朋友可以參考下
2024-09-09
vue系列之動(dòng)態(tài)路由詳解【原創(chuàng)】
下面小編就為大家?guī)?lái)一篇vue系列之動(dòng)態(tài)路由詳解【原創(chuàng)】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就想給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
Vant Uploader實(shí)現(xiàn)上傳一張或多張圖片組件
這篇文章主要為大家詳細(xì)介紹了Vant Uploader實(shí)現(xiàn)上傳一張或多張圖片組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09