這篇文章將為大家詳細講解有關vue.js如何實現數據動態響應，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。
代碼如下
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./js/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in listData">{{item}}</li>
</ul>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" v-text="he" @click="changeData()"></a>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
he:"點我",
listData:["a","b","c"]
},
methods:{
changeData () {
this.listData[0]="d";
}
}
})
</script>
</html>當我點擊按鈕時候，發現沒有任何變化，頁面上還是a,b,c
vue當然不會這么菜呢
下面是偉大的vue內置的方法來了
Vue.set()
官方解釋
設置對象的屬性。如果對象是響應式的，確保屬性被創建后也是響應式的，同時觸發視圖更新。這個方法主要用于避開 Vue 不能檢測屬性被添加的限制。
我的理解就是觸發視圖重新更新一遍，數據動態起來
Vue.set(a,b,c)
a是要更改的數據
b是數據的第幾項
c是更改后的數據
解決上面數據不能更改后的代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./js/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in listData">{{item}}</li>
</ul>
<a href="javascript:void(0)" v-text="he" @click="changeData()"></a>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
he:"點我",
listData:["a","b","c"]
},
methods:{
changeData () {
Vue.set(this.listData,0,'X')
}
}
})
</script>
</html>效果圖：
點擊后，我們可以看到，this.listData數組的第一項已經被更改了
X
關于“vue.js如何實現數據動態響應”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
