這篇文章給大家介紹this.$set怎么在vue中使用,內容非常詳細,感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。

網站建設哪家好,找創新互聯!專注于網頁設計、網站建設、微信開發、微信小程序開發、集團企業網站建設等服務項目。為回饋新老客戶創新互聯還提供了新林免費建站歡迎大家使用!
當vue的data里邊聲明或者已經賦值過的對象或者數組(數組里邊的值是對象)時,向對象中添加新的屬性,如果更新此屬性的值,是不會更新視圖的。
<template>
<div id="app">
<p v-for="item in items" :key="item.id">{{item.message}}</p>
<button class="btn" @click="handClick()">更改數據</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 可以觸發更新視圖
},
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: 要更改的數據源(可以是一個對象或者數組)
key 要更改的具體數據 (索引)
value 重新賦的值
關于this.$set怎么在vue中使用就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
分享標題:this.$set怎么在vue中使用
網站鏈接:http://www.yijiale78.com/article38/pchdsp.html
成都網站建設公司_創新互聯,為您提供響應式網站、ChatGPT、商城網站、外貿建站、建站公司、關鍵詞優化
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯