vue中 this.$set的用法詳解
更新時(shí)間：2019年09月06日 08:22:23 作者：yang
這篇文章主要介紹了vue中 this.$set的用法詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
當(dāng)vue的data里邊聲明或者已經(jīng)賦值過的對象或者數(shù)組（數(shù)組里邊的值是對象）時(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í)對象的值更改了，但是視圖沒有更新
// 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è)對象或者數(shù)組）
- key 要更改的具體數(shù)據(jù) （索引）
- value 重新賦的值
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
基于Vue.js 2.0實(shí)現(xiàn)百度搜索框效果
這篇文章主要為大家詳細(xì)介紹了基于Vue.js 2.0實(shí)現(xiàn)百度搜索框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
vue使用html2canvas實(shí)現(xiàn)將DOM節(jié)點(diǎn)生成對應(yīng)的PDF
這篇文章主要為大家詳細(xì)介紹了vue如何使用html2canvas實(shí)現(xiàn)將DOM節(jié)點(diǎn)生成對應(yīng)的PDF,文中的示例代碼簡潔易懂,感興趣的小伙伴可以學(xué)習(xí)一下2023-08-08
基于vue實(shí)現(xiàn)網(wǎng)站前臺的權(quán)限管理(前后端分離實(shí)踐)
這篇文章主要介紹了基于vue實(shí)現(xiàn)網(wǎng)站前臺的權(quán)限管理(前后端分離實(shí)踐)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了Vuex給state中的對象新添加屬性遇到的問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue props 單項(xiàng)數(shù)據(jù)流實(shí)例分享
在本篇文章里小編給大家分享的是一篇關(guān)于vue props 單項(xiàng)數(shù)據(jù)流實(shí)例分享內(nèi)容，需要的朋友們可以參考下。2020-02-02
本文主要介紹了Vue中使用Lodash的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue?基于?vuedraggable?實(shí)現(xiàn)選中、拖拽、排序效果
這篇文章主要介紹了Vue?基于?vuedraggable?實(shí)現(xiàn)選中、拖拽、排序效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了vue中的封裝常用工具類，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vue中使用swiper 插件出錯(cuò)問題及解決辦法，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-08-08
這篇文章主要為大家介紹了vue3動(dòng)態(tài)綁定背景圖片實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-10-10