一和二，请参考https://www.cnblogs.com/zui-ai-java/p/11109213.html

三、index.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>index</title>

 </head>

 <body>

     <div id="app">

         <div>

             <input type="text" v-model="price">

             {{price | currency("USD")}}

         </div>

         <div>

             <input type="text" v-model="length">mm

             <br>

             {{length | meter}}

         </div>

     </div>

     <script src="../lib/vue.js"></script>

     <script src="./js/main.js"></script>

 </body>

 </html>

四、main.js

 // 注意：过滤器是解决将界面展现在浏览器最后一公里的手段，所以适用于简单的处理，

 // 如果是复杂的处理，就尽量使用计算属性，因为其带有缓存，而且可重用性也很方便

 // 创建货币过滤器

 Vue.filter("currency",function(val,unit){

     val = val || 0;

     unit = unit || "元";

     return val + unit;

 });

 // 创建毫米转换米的长度过滤器

 Vue.filter("meter",function(val,unit){

     val = val || 0;

     unit = unit || "m";

     // toFixed(n) 此方法用于保留n位小数

     return (val/1000).toFixed(2) + unit;

 })

 new Vue({

     el:"#app",

     data:{

         price:10,

         length:20

     }

 })

五、效果

六、感谢观看，如有疑问，欢迎交流哦

Vue的filter过滤器的更多相关文章

  1. filter 过滤器的基本使用

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  2. vue教程2-06 过滤器

    vue教程2-06 过滤器 过滤器: vue提供过滤器: capitalize uppercase currency.... <div id="box"> {{msg| ...

  3. vue教程(二)--过滤器和监视改动功能

    过滤器filter: 1.将数据进行添油加醋的操作. 2.过滤器分两种: 组件内的过滤器(组件内有效). 全局过滤器 组件内:filters:{过滤器名:过滤器函数fn},fn内通过return 返回 ...

  4. Vue学习之过滤器和自定义指令小结（三）

    过滤器: 过滤是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰.过滤器就是过滤用的工具.渲染数据用的!!! 我们需要知道的是: 1.Vue中的过滤器不能 ...

  5. 黑马vue---28、vue中全局过滤器的基本使用

    黑马vue---28.vue中全局过滤器的基本使用 一.总结 一句话总结: vue中的过滤器可以传递参数(根据参数来过滤),也可以用管道符拼接多个过滤器:例如<p>{{ msg | msg ...

  6. 第二章 Vue快速入门-- 24 过滤器-Vue中全局过滤器的基本使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. Vue 中的过滤器的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. filter 过滤器（监听）

    Filter 过滤器 1.简介 Filter也称之为过滤器,它是Servlet技术中最实用的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, ...

  9. Java防止SQL注入2（通过filter过滤器功能进行拦截）

    首先说明一点,这个过滤器拦截其实是不靠谱的,比如说我的一篇文章是介绍sql注入的,或者评论的内容是有关sql的,那会过滤掉:且如果每个页面都经过这个过滤器,那么效率也是非常低的. 如果是要SQL注入拦 ...

随机推荐

  1. 【JZOJ5064】【GDOI2017第二轮模拟day2】友好城市 Kosarajo算法+bitset+ST表+分块

    题面 在Byteland 一共有n 座城市,编号依次为1 到n,这些城市之间通过m 条单向公路连接. 对于两座不同的城市a 和b,如果a 能通过这些单向道路直接或间接到达b,且b 也能如此到达a,那么 ...

  2. MySQL.之 一行内容转换多行

    MySQL.之 一行内容转换多行 描述: 将一行记录中的某一列值(值格式:数据之间用英文逗号隔开),将这一数据转换成多行. 例如:表 cds_var 中的 cds_value 中的数据格式:多个id之 ...

  3. delete records in table A not in table B

    转)A.B两表,找出ID字段中,存在A表,但是不存在B表的数据.A表总共13w数据,去重后大约3W条数据,B表有2W条数据,且B表的ID字段有索引. 方法一 使用 not in ,容易理解,效率低  ...

  4. pytest相关资源收集

    pytest官网 https://docs.pytest.org/en/latest/getting-started.html 官网推荐的plugin https://docs.pytest.org/ ...

  5. ubuntu上制作应用程序的快捷图标启动

    最近在研究Go语言,对比了几种流行的IDE,发现GoLand是使用体验最好的,没有之一.这也印证了网友们常说的那句话“JetBrain出品,必属精品”. 在ubuntu环境下使用GoLand,直接到J ...

  6. jmeter测试APP时如何录制脚本

    jmeter录制脚本需要注意的点: (1)手机和电脑需要处于一个局域网内(如手机和电脑所使用一个wifi) (2)设置手机代理的时候手机IP填写本机IP,端口号要和jmeter的相同,一般情况下端口号 ...

  7. Array操作的方法

    //concat连接数组连接一个或多个数组 //var a = [1,2,3]; //var c=[4,5] //var b = a.concat(c); //console.log(b); //jo ...

  8. 运行docker容器镜像2(指定容器启动时启动的脚本)

    docker中启动容器有以下两种情况. 第一种是通过 # docker run containerid 启动一个容器. 第二种是重新启动已经关闭的容器. # docker start containe ...

  9. ps学习教程

    1.通道抠图:http://www.16xx8.com/photoshop/tongdaokoutu/

  10. vue中$bus的传参的坑

    今天在做项目的时候碰见一个坑就是B页面有个点击事件需要触发完然后跳转到A页面,接着页面跳转过去后再A页面的create生命周期中利用on监听事件的改变,接着赋值给data里面某个数据,但是奇怪的问题是 ...