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. 使用 Cobbler 自动化和管理系统安装

    设置一个网络环境可能涉及到许多步骤,才能为开始安装做好准备.您必须: 配置服务,比如 DHCP.TFTP.DNS.HTTP.FTP 和 NFS 在 DHCP 和 TFTP 配置文件中填入各个客户端机器 ...

  2. windows下如何生成gitlab ssh公钥

    1.查看是否已经有了ssh密钥:cd ~/.ssh如果没有密钥则不会有此文件夹,有则备份删除2.生存密钥: $ ssh-keygen -t rsa -C “你的邮箱”按3个回车,密码为空. Your ...

  3. C# 图片识别（支持21种语言）

    图片识别的技术到几天已经很成熟了,只是相关的资料很少,为了方便在此汇总一下(C#实现),方便需要的朋友查阅,也给自己做个记号. 图片识别的用途:很多人用它去破解网站的验证码,用于达到自动刷票或者是批量 ...

  4. 【SqlServer】聚集索引与主键、非聚集索引

    目录结构: contents structure [-] 聚集索引和非聚集索引的区别 聚集索引和主键的区别 主键和(非)聚集索引的常规操作 聚集索引.非聚集索引在SqlServer.MySQL.Ora ...

  5. 【Android】播放音频的几种方式介绍

    接下来笔者介绍一下Android中播放音频的几种方式,android.media包下面包含了Android开发中媒体类,当然笔者不会依次去介绍,下面介绍几个音频播放中常用的类: 1.使用MediaPl ...

  6. IDEA使用笔记（一）——使用前的基本设置

    前言:记忆不好,有些东西需要的时候又需要找一找,那就不如让“纸和笔”来帮忙记录一下啦!到时候查找也方便,而且是自己的东西印象更加的深刻,说不定还能帮助到他人多好玩的事情! 软件的下载.安装就不记啦!自 ...

  7. Error Code: 1030. Got error -1 from storage engine

    这个问题通常是数据库可以建表,旧表可以插入数据,正常:可是新表无法插入数据,无法改名等操作: 先从文件权限找方法,没法解决: 在网上搜了一通,大家都说的磁盘满了,但是我们的磁盘还空着呢! 后来,发现! ...

  8. 字符集不同导致的ORA-00972

    使用ssh登录RAC的两个节点,分别执行相同的sql语句,发现其中一个报错ora-00972: 检查后发现,左侧节点的客户端使用的字符集是SecureCRT的默认字符集,右侧使用的是UTF-8

  9. SharePoint 2013 Farm 安装指南——Least Privilege

    写过很多关于SharePoint 2013 安装,这是第四篇.可能你会觉得为什么如此简单的安装至于花那么多精力去折腾吗.我的答案是肯定的.知识的积累不是一蹴而就的,而是循序渐进的去学习,每一个阶段都有 ...

  10. 常用代码之四：创建jason，jason转换为字符串，字符串转换回jason，c#反序列化jason字符串的几个代码片段

    1.创建jason,并JSON.stringify()将之转换为字符串. 直接使用var customer={}, 然后直接customer.属性就可以直接赋值了. 也可以var customer = ...