Vue计算属性
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>計(jì)算屬性</title><script src="js/vue.js"></script></head><body><div id="app"><p>原始字符串: {{ message }}</p><p>計(jì)算后反轉(zhuǎn)字符串: {{ reversedMessage }}</p><p>{{site}}</p></div><script>var vm = new Vue({el: '#app',data: {message: 'Runoob!',name:'Google',url:'http://www.google.com'},computed: {// 計(jì)算屬性的 getterreversedMessage: function() {// `this` 指向 vm 實(shí)例return this.message.split('').reverse().join('')},//computed 屬性默認(rèn)只有 getter ，不過(guò)在需要時(shí)你也可以提供一個(gè) setter ：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='菜鳥(niǎo)教程 http://www.runoob.com';document.write('name:'+vm.name);document.write('<br />');document.write('url:'+vm.url);</script></body>
</html>
總結(jié)
- 上一篇： Vue循环语句
- 下一篇： html5倒计时秒杀怎么做,vue 设