关于vue.js的计算属性练习代码，供大家参考，具体内容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vuejs计算属性</title> </head> <body> <!-- 字母反转方式一：不推荐 --> <div> {{ message.split('').reverse().join('') }} </div> <!-- 字母反转方式二 --> <div> {{ message2 }} <!-- 注意{}内的内容如果是方法要加() --> <p>反转后的内容{{ reverseMessage2() }}</p> </div> <!-- 字母反转方式三 此方法在括号中没有方法()--> <div> <p>原始{{message3}}</p> <p>反转后{{ reverseMessage3 }}</p> </div> <!-- 方法二和方法三的区别在于methods会实时刷新数据 而computed会在第一次加载后会产生缓存--> <!-- Vue.js 提供了一个方法 $watch ，它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时， $watch 很诱人 —— 特别是如果你来自 AngularJS 。不过，通常更好的办法是使用计算属性而不是一个命令式的 $watch 回调。 --> <div> {{fullName}} </div> <!-- 另一种实现方式--> <div> {{ fullname }} </div> <!-- 计算属性可以满足需求而且书写简便 为什么需要watch? 来响应数据的变化。当你想要在数据变化响应时，执行异步操作或昂贵操作时，这是很有用的。 --> <script src="https://www.jb51.net/js/vue.js"></script> <script src="https://www.jb51.net/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 getter reverseMessage3: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 } } });