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. 详解Vue中watch的高级用法

    我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: <div> <p>FullName: {{fullName} ...

  2. vue 中 命名视图的用法

    今天主要记录  vue中命名视图的用法 先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下,一个页面 ...

  3. vue中watch的详细用法

    在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model=&quo ...

  4. vue中watch的详细用法（转载）

    在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model=&quo ...

  5. vue中this.$set的用法

    之前了解这个方法的时候,感觉这一辈子也用不到这个方法,因为当时没有应用场景,但是还真有用的时候,我相信你们也有用到时候. 从三个方面给大家说一下这个this.$set: 1.this.$set实现什么 ...

  6. vue中过滤器filters的使用

    组件内写法 filters:{ filter:function(data,arg1,arg2){ return .... } } 全局写法 filters('filter',function(data ...

  7. vue中$ref的基本用法

    1.使用在一般的标签上 <div id="app"> <input ref="count" type="text" v-m ...

  8. vue中watch函数的用法

    vue中watch函数: 不仅可以判断路由变化(上篇博客有介绍),还可以判断数据的变化 (1):首先写watch函数 (2):在data里定义值 (3):在methods里写方法 (4):使用值

  9. vue中router-link的详细用法

    官网文档地址:https://router.vuejs.org/zh/api/#to 今天项目突然有需求,让vue中的一个页面跳转到另一个页面 // 字符串 <router-link to=&q ...

随机推荐

  1. flex水平垂直居中

    <div class="parent"> <div class="children">我是通过flex的水平垂直居中噢!</div ...

  2. 推荐系统 SVD和SVD++算法

    推荐系统 SVD和SVD++算法 SVD:   SVD++: [Reference] 1.SVD在推荐系统中的应用详解以及算法推导 2.推荐系统——SVD/SVD++ 3.SVD++ 4.SVD++协 ...

  3. Ubuntu菜鸟入门（十三）—— 切换软件源

    默认中国服务器,我们把它切换成aliyun的. 在设置--软件和更新里--下载自--其他站点--中国--http://mirrors.aliyun.com/ubuntu 先把所有软件源和软件更新到最新 ...

  4. Magento模块升级修改数据库表结构

    Magento支持在模块中创建.删除.更新数据库表及字段.通过该方式,在插件开发的过程中,添加和修改字段变成了一件非常轻松的事情.只需要修改模块的版本号,同时在文件中添加一个符合命名规则的脚本就可以了 ...

  5. 【Algorithm】插入排序

    一. 算法描述 插入排序具体算法描述如下: 从第一个元素开始,该元素可以认为已经被排序 取出下一个元素,在已经排序的元素序列中从后向前扫描 如果该元素(已排序)大于新元素,将该元素移到下一位置 重复步 ...

  6. mysql homedir迁移

    随着数据库的增长,innodb文件和日志文件会越来越大,如果是默认安装的mysql,这些文件一般是放在 /usr/lib/mysql 下面进行转移: 1,安全关闭mysql mysqladmin -u ...

  7. android图片等比例缩放 填充屏幕

    在ImageView的t同事设置两个属性 android:adjustViewBounds="true"android:scaleType="fitXY"

  8. MySQL加载配置文件的顺序

    MySQL5.6启动时,按照下表,从上往下的顺序加载配置文件: File Name Purpose /etc/my.cnf Global options /etc/mysql/my.cnf Globa ...

  9. Linux 的僵尸(zombie)进程

    可能很少有人意识到,在一个进程调用了exit之后,该进程 并非马上就消失掉,而是留下一个称为僵尸进程(Zombie)的数据结构.在Linux进程的5种状态中,僵尸进程是非常特殊的一种,它已经放弃了几乎 ...

  10. HDU - 4511 小明系列故事――女友的考验(AC自己主动机+DP)

    Description 最终放寒假了,小明要和女朋友一起去看电影.这天,女朋友想给小明一个考验,在小明正准备出发的时候.女朋友告诉他.她在电影院等他,小明过来的路线必须满足给定的规则:  1.如果小明 ...