<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <p>原来的小数: {{ float_number }}</p> <p>计算过的动态属性（整数）: {{ int_number }}</p> </div> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm=new Vue({ el: '#app', data: { float_number: 3433.45 }, computed: { //computed 是计算属性（翻译：计算的） 属性名不可改 int_number: function () { //这里定义的int_number不再当做方法使用，而是一个属性， return parseInt(this.float_number); //parseInt(this.float_number)注意这个this，指的就是vm; } }, filters: { //filters属性关键字，filters 是属性属性名不能改 过滤器不过是一个方法， filter在2.0版本以后不再允许在directive里使用 toInt: function (value) { return parseInt(value); } }
//计算属性可以根据data属性源的变化自动缓存，而methods里面的方法是每次都会运行一次，filters也是， }) </script> </html>