vue中的filters的用法

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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">

<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.filter("money",function (value,type) {
return "￥"+value.toFixed(2)+type;
});