VUE计算属性关键词: computed
生活随笔
收集整理的這篇文章主要介紹了
VUE计算属性关键词: computed
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>計(jì)算列屬性</title><script src="js/vue.min.js"></script></head><body><div id="app"><p>原始字符串:{{message}}</p><p>計(jì)算后反轉(zhuǎn)字符串:{{reversedMsg}}</p><p>使用methods的反轉(zhuǎn)字符串：{{reversedMsg2()}}</p></div><script>new Vue({el:'#app',data:{message:'www.csdn.net'},computed:{//計(jì)算屬性的getterreversedMsg:function(){//this:指向new Vue()的實(shí)例;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]}}}})//調(diào)用setter,vm.name和vm.url也會(huì)被對(duì)應(yīng)更新;//vm.site='程序員俱樂(lè)部：http://www.csdn.net';console.log('name:'+vm.name);console.log('<br/>');console.log('url:'+vm.url);</script></body> </html>?
?當(dāng)更改vm的site屬性的時(shí)候，則屬性更改下：
?
?
總結(jié)
以上是生活随笔為你收集整理的VUE计算属性关键词: computed的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： VUE参数和过滤器
- 下一篇： VUE之监听属性 watch