Vue實現(xiàn)動態(tài)響應數(shù)據(jù)變化
更新時間：2017年04月28日 10:33:30 作者：xjlinme
本篇文章主要介紹了Vue 動態(tài)響應數(shù)據(jù)變化，通過綁定數(shù)據(jù)即可以實時改變視圖顯示，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
Vue是MVVM模式，即Model-View-ViewModel，通過綁定數(shù)據(jù)即可以實時改變視圖顯示。
比如：使用v-blink動態(tài)綁定屬性
<div v-blink:class="property"></div>
使用v-html來綁定帶有標簽的內(nèi)容（會解析標簽）
<div v-blink:class="property" v-html="content"></div>
使用v-text來綁定純文本的內(nèi)容（標簽會以文本的形式輸出）
<div v-blink:class="property" v-text="content"></div>
無論通過哪種形式綁定，都需要在Vue中的data中定義
var App = new Vue ({
el: '#app',
data: {
property: '',
content: '',
example: [],
}
methods: {
}
});
但是如果你需要在接來下的工作中使用到新的變量，或者你發(fā)現(xiàn)你改變已在data中定義的對象的值，但是視圖卻沒有動態(tài)變化?？梢酝ㄟ^以下方式解決：
Vuejs擴展了觀察數(shù)組
1.使用$set
//等同于 App.example[0] = {name: 1}
App.example.$set(0, {name: 1});
2.使用全局Vue
Vue.set(example, 'name', 1);
通過這兩種種方式都可以使視圖更新
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue 中v-model的完整用法及v-model的實現(xiàn)原理解析
這篇文章詳細介紹了Vue.js中的v-model指令的使用,包括基本用法、原理、結合不同類型的表單元素（如radio、checkbox、select）以及使用修飾符（如lazy、number、trim）等,感興趣的朋友一起看看吧2025-02-02
vue中國城市選擇器的使用教程(element-china-area-data)
這篇文章主要給大家介紹了關于vue中國城市選擇器使用(element-china-area-data)的相關資料,使用element-china-area-data插件可以非常方便地實現(xiàn)省市縣三級聯(lián)動選擇器,需要的朋友可以參考下2023-11-11
vue3中的reactive、readonly和shallowReactive使用詳解
在 Vue3 中,可以使用 shallowReactive 函數(shù)創(chuàng)建一個淺層響應式對象,它接收一個普通對象作為參數(shù),返回一個淺層響應式代理對象,本文給大家介紹vue3中的reactive、readonly和shallowReactive使用,感興趣的朋友跟隨小編一起看看吧2024-04-04
Vue3項目頁面實現(xiàn)echarts圖表漸變色的動態(tài)配置的實現(xiàn)步驟
在開發(fā)可配置業(yè)務平臺時,需要實現(xiàn)讓用戶對項目內(nèi)echarts圖表的動態(tài)配置,讓用戶脫離代碼也能實現(xiàn)簡單的圖表樣式配置,顏色作為圖表樣式的重要組成部分,其配置方式是項目要解決的重點問題,所以本文介紹了Vue3項目頁面實現(xiàn)echarts圖表漸變色的動態(tài)配置2024-10-10
這篇文章主要介紹了vue 指令之氣泡提示效果的實現(xiàn)代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-10-10
這篇文章主要給大家介紹了關于Vue中加載天地圖的離線地圖的基本步驟,Vue天地圖離線地圖是指基于Vue框架開發(fā)的應用程序,使用天地圖離線地圖服務提供商提供的地圖數(shù)據(jù),可以在沒有網(wǎng)絡的情況下使用地圖功能,需要的朋友可以參考下2023-10-10
這篇文章主要給大家介紹了關于vue設置頁面背景及背景圖片的相關資料,在Vue項目開發(fā)中我們經(jīng)常要向頁面中添加背景圖片,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-08-08
Vue3響應式高階用法之shallowReadonly()使用
在前端開發(fā)中,Vue3的shallowReadonly() API允許開發(fā)者創(chuàng)建部分只讀的狀態(tài),這對于保持頂層屬性不變而內(nèi)部屬性可變的場景非常有用,本文將詳細介紹?shallowReadonly()?的使用方法及其應用場景,具有一定的參考價值,感興趣的可以了解一下2024-09-09
Vue項目從webpack3.x升級webpack4不完全指南
前段時間，泡面將自己的一個Vue-cli構建的前端框架從webpack3.x升級到了4.x版本，現(xiàn)在才拉出來記錄一下，已備忘之用，也和大家分享一下,需要的朋友可以參考下2019-04-04
本文通過實例代碼給大家介紹了Vue隱藏顯示、只讀功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07