關(guān)于vue.js的計算屬性練習(xí)代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>vuejs計算屬性</title></head><body><!-- 字母反轉(zhuǎn)方式一：不推薦--> <div id="app-1">{{ message.split('').reverse().join('') }}</div><!-- 字母反轉(zhuǎn)方式二--><div id="app-2">{{ message2 }}<!-- 注意{}內(nèi)的內(nèi)容如果是方法要加()--> <p>反轉(zhuǎn)后的內(nèi)容{{ reverseMessage2() }}</p></div><!-- 字母反轉(zhuǎn)方式三 此方法在括號中沒有方法()--><div id="app-3"><p>原始{{message3}}</p><p>反轉(zhuǎn)后{{ reverseMessage3 }}</p></div><!-- 方法二和方法三的區(qū)別在于methods會實(shí)時刷新數(shù)據(jù) 而computed會在第一次加載后會產(chǎn)生緩存--><!-- Vue.js 提供了一個方法 $watch ，它用于觀察 Vue 實(shí)例上的數(shù)據(jù)變動。當(dāng)一些數(shù)據(jù)需要根據(jù)其它數(shù)據(jù)變化時， $watch 很誘人 ―― 特別是如果你來自 AngularJS 。不過，通常更好的辦法是使用計算屬性而不是一個命令式的 $watch 回調(diào)。 --><div id="app-4">{{fullName}}</div><!-- 另一種實(shí)現(xiàn)方式--><div id="app-5">{{ fullname }}</div><!-- 計算屬性可以滿足需求而且書寫簡便 為什么需要watch?來響應(yīng)數(shù)據(jù)的變化。當(dāng)你想要在數(shù)據(jù)變化響應(yīng)時，執(zhí)行異步操作或昂貴操作時，這是很有用的。 --><script src="js/vue.js"></script><script src="js/vuetext.js"></script></body></html>Js文件
var app1=new Vue({el: '#app-1',data: {message: 'Hello Ke'},})var app2=new Vue({el:'#app-2',data:{message2:'Hello Hou Hou'},methods: {reverseMessage2: function () {return this.message2.split('').reverse().join('')}}});var app3=new Vue({el:'#app-3',data:{message3:'Zhou Er Ke'},computed:{//a computed getterreverseMessage3:function () {return this.message3.split('').reverse().join('')}}});var app4 = new Vue({el: '#app-4',data: {firstName: 'Foo',lastName: 'Bar',fullName: 'Foo Bar'},watch: {firstName: function (val) {this.fullName = val + ' ' + this.lastName},lastName: function (val) {this.fullName = this.firstName + ' ' + val}}});var app5=new Vue({el:'#app-5',data:{firstName: 'Foo',lastName: 'Bar',},computed:{fullname:function () {return this.firstName+' '+this.lastName}}});以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
