vue中的filters的用法

時間 2019-11-12

標籤 vue filters 用法简体版

原文原文鏈接

一、效果

金額保留兩位小數，並加上單位元css

二、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>

三、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;
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。