您好,登錄后才能下訂單哦!
這篇文章主要介紹關(guān)于Vue.js響應(yīng)接口的詳細(xì)介紹,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
Vue 可以添加數(shù)據(jù)動(dòng)態(tài)響應(yīng)接口。
例如以下實(shí)例,我們通過使用 $watch 屬性來實(shí)現(xiàn)數(shù)據(jù)的監(jiān)聽,$watch 必須添加在 Vue 實(shí)例之外才能實(shí)現(xiàn)正確的響應(yīng)。
實(shí)例中通過點(diǎn)擊按鈕計(jì)數(shù)器會(huì)加 1。setTimeout 設(shè)置 10 秒后計(jì)算器的值加上 20 。
<div id = "app"> <p style = "font-size:25px;">計(jì)數(shù)器: {{ counter }}</p> <button @click = "counter++" style = "font-size:25px;">點(diǎn)我</button> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#app', data: { counter: 1 } }); vm.$watch('counter', function(nval, oval) { alert('計(jì)數(shù)器值的變化 :' + oval + ' 變?yōu)?' + nval + '!'); }); setTimeout( function(){ vm.counter += 20; },10000 ); </script>
效果如下:
Vue 不允許在已經(jīng)創(chuàng)建的實(shí)例上動(dòng)態(tài)添加新的根級(jí)響應(yīng)式屬性。
Vue 不能檢測到對象屬性的添加或刪除,最好的方式就是在初始化實(shí)例前聲明根級(jí)響應(yīng)式屬性,哪怕只是一個(gè)空值。
如果我們需要在運(yùn)行過程中實(shí)現(xiàn)屬性的添加或刪除,則可以使用全局 Vue,Vue.set 和 Vue.delete 方法。
Vue.set
Vue.set 方法用于設(shè)置對象的屬性,它可以解決 Vue 無法檢測添加屬性的限制,語法格式如下:
Vue.set( target, key, value )
參數(shù)說明:
<div id = "app"> <p style = "font-size:25px;">計(jì)數(shù)器: {{ products.id }}</p> <button @click = "products.id++" style = "font-size:25px;">點(diǎn)我</button> </div> <script type = "text/javascript"> var myproduct = {"id":1, name:"book", "price":"20.00"}; var vm = new Vue({ el: '#app', data: { products: myproduct } }); vm.products.qty = "1"; console.log(vm); vm.$watch('products.id', function(nval, oval) { alert('計(jì)數(shù)器值的變化 :' + oval + ' 變?yōu)?' + nval + '!'); }); </script>
在以上實(shí)例中,使用以下代碼在開始時(shí)創(chuàng)建了一個(gè)變量 myproduct:
var myproduct = {"id":1, name:"book", "price":"20.00"};
該變量在賦值給了 Vue 實(shí)例的 data 對象:
var vm = new Vue({ el: '#app', data: { products: myproduct } });
如果我們想給 myproduct 數(shù)組添加一個(gè)或多個(gè)屬性,我們可以在 Vue 實(shí)例創(chuàng)建后使用以下代碼:
vm.products.qty = "1";
查看控制臺(tái)輸出:
如上圖看到的,在產(chǎn)品中添加了數(shù)量屬性 qty,但是 get/set 方法只可用于 id,name 和 price 屬性,卻不能在 qty 屬性中使用。
我們不能通過添加 Vue 對象來實(shí)現(xiàn)響應(yīng)。 Vue 主要在開始時(shí)創(chuàng)建所有屬性。 如果我們要實(shí)現(xiàn)這個(gè)功能,可以通過 Vue.set 來實(shí)現(xiàn):
<div id = "app"> <p style = "font-size:25px;">計(jì)數(shù)器: {{ products.id }}</p> <button @click = "products.id++" style = "font-size:25px;">點(diǎn)我</button> </div> <script type = "text/javascript"> var myproduct = {"id":1, name:"book", "price":"20.00"}; var vm = new Vue({ el: '#app', data: { products: myproduct } }); Vue.set(myproduct, 'qty', 1); console.log(vm); vm.$watch('products.id', function(nval, oval) { alert('計(jì)數(shù)器值的變化 :' + oval + ' 變?yōu)?' + nval + '!'); }); </script>
從控制臺(tái)輸出的結(jié)果可以看出 get/set 方法可用于qty 屬性。
Vue.delete
Vue.delete 用于刪除動(dòng)態(tài)添加的屬性 語法格式:
Vue.delete( target, key )
參數(shù)說明:
<div id = "app"> <p style = "font-size:25px;">計(jì)數(shù)器: {{ products.id }}</p> <button @click = "products.id++" style = "font-size:25px;">點(diǎn)我</button> </div> <script type = "text/javascript"> var myproduct = {"id":1, name:"book", "price":"20.00"}; var vm = new Vue({ el: '#app', data: { products: myproduct } }); Vue.delete(myproduct, 'price'); console.log(vm); vm.$watch('products.id', function(nval, oval) { alert('計(jì)數(shù)器值的變化 :' + oval + ' 變?yōu)?' + nval + '!'); }); </script>
以上實(shí)例中我們使用 Vue.delete 來刪除 price 屬性。以下是控制臺(tái)輸出結(jié)果:
從上圖輸出結(jié)果中,我們可以看到 price 屬性已刪除,只剩下了 id 和 name 屬性,price 屬性的 get/set 方法也已刪除。
以上是關(guān)于Vue.js響應(yīng)接口的詳細(xì)介紹的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。