vue中 this.$set的用法詳解

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

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

當vue的data里邊聲明或者已經(jīng)賦值過的對象或者數(shù)組（數(shù)組里邊的值是對象）時，向對象中添加新的屬性，如果更新此屬性的值，是不會更新視圖的。

<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'} //此時對象的值更改了，但是視圖沒有更新
  // 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>

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

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

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