1、效果
金额保留两位小数，并加上单位元
2、index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <title>Title</title> <link rel="stylesheet" href="css/index.css"> </head> <body> <div id="app"> <!--<h2>{{title}}</h2>--> <li v-for="(item,index) in productList"> <div>金额：{{item.productPrice*item.productQuentity | formatMoney}}</div>
<!--注意元需要用双引号，不能用单引号，会出错--> <div>金额：{{item.productPrice*item.productQuentity | money("元")}}</div> </li> </div> <script src="js/lib/vue.min.js"></script> <script src="js/lib/vue-resource.min.js"></script> <script src="js/cart.js"></script> </body> </html>
3、cart.js
/** * Created by kk on 2017/4/16. */ new Vue({ el:"#app", data:{ // title:"hello vue" totalMoney:0, productList:[] }, filters:{ formatMoney:function (value) { return "￥"+value.toFixed(2) } }, mounted:function () { //类似于jquery中的ready方法 this.$nextTick(function () { this.cartView(); }) }, methods:{ cartView:function () { // this.title="Vue hello" //var _this=this; // this.$http.get("data/cart.json",{"id":123}).then(function (res) { // _this.productList=res.body.result. productList; // _this.totalMoney=res.body.result.totalMoney; // }); // 这里使用了ES6语法=>将this指向外部，不用再使用_this
let _this=this; this.$http.get("data/cart.json",{"id":123}).then(res=> { this.productList=res.body.result. productList; this.totalMoney=res.body.result.totalMoney; }); } } });
<!--注意Vue要大写v，不然会报错--> Vue.filter("money",function (value,type) { return "￥"+value.toFixed(2)+type; });