當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

VUE计算属性关键词: computed

發布時間：2024/1/23 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 VUE计算属性关键词: computed 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>計算列屬性</title><script src="js/vue.min.js"></script></head><body><div id="app"><p>原始字符串:{{message}}</p><p>計算后反轉字符串:{{reversedMsg}}</p><p>使用methods的反轉字符串：{{reversedMsg2()}}</p></div><script>new Vue({el:'#app',data:{message:'www.csdn.net'},computed:{//計算屬性的getterreversedMsg:function(){//this:指向new Vue()的實例;return this.message.split('').reverse().join('')}},methods:{reversedMsg2:function(){return this.message.split('').reverse().join('')}}})</script></body> </html>

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>computed setter</title><script src="js/vue.min.js"></script></head><body><div id="app"><p>{{site}}</p></div><script>var vm=new Vue({el:'#app',data:{name:'Google',url:'http://www.51cto.com'},computed:{site:{//getterget:function(){return this.name+''+this.url},//setterset:function(newValue){var names=newValue.split(' ')this.name=names[0]this.url=names[names.length-1]}}}})//調用setter,vm.name和vm.url也會被對應更新;//vm.site='程序員俱樂部：http://www.csdn.net';console.log('name:'+vm.name);console.log('<br/>');console.log('url:'+vm.url);</script></body> </html>

?當更改vm的site屬性的時候，則屬性更改下：

總結

以上是生活随笔為你收集整理的VUE计算属性关键词: computed的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。