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

<!--<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;

});

巴特西

vue中的filters的用法

1、效果

2、index.html

3、cart.js

最新文章

热门文章