一和二，请参考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. SQLSERVER 根据传入的参数拼接sql语句字符串，反馈结果集

    ALTER PROCEDURE [dbo].[usp_visit_detail](@siteid BIGINT, @Startime VARCHAR(15), @Endtime  VARCHAR(15 ...

  2. 移动端以及 PC浏览器页面分享到朋友圈等的功能实现

    我们经常可以在一些 app上看到分享到朋友圈.微信好友.qq好友等功能,例如 饿了么.美团等 app,下单之后就会弹出给好友发红包的 modal窗,这在 app上很常见,app的权限可以很大,甚至连启 ...

  3. MSSQL → 02：数据库结构

    一.数据库的组成 在SQL Server 2008中,用户如何访问及使用数据库,就需要正确了解数据库中所有对象及其设置.数据库就像一个容器,它里面除了存放着数据的表之外,还有视图.存储过程.触发器.约 ...

  4. Directx11教程(19) 画一个简单的地形

    原文:Directx11教程(19) 画一个简单的地形       通常我们在xz平面定义一个二维的网格,然后y的值根据一定的函数计算得到,比如正弦.余弦函数的组合等等,可以得到一个看似不错的地形或者 ...

  5. oracle加锁

    锁 insert into TEST values(5); 加row exclusive锁,和row share相同,但也禁止用share方式加锁. Create index idx_test on ...

  6. Django1.11使用命令makemigrations提示No Changes

    在项目中,遇到models模型变动,变动后合并发生问题,故当时做了删除应用文件夹下migrations文件,由于数据库里无较多新数据,故删除后重建,但重建后执行模型合并操作结果为No Changes, ...

  7. Python中的动态继承

    所谓动态继承,是指代码运行时再决定某个类的父类.某些场景下会用到,比如threading.Thread和multiprocessing.Process这两个类有很多同名的接口,可以实现某个子类动态继承 ...

  8. HTML之CSS标签

    1.CSS选择器 1).id选择器   2).class选择器 3).标签选择器   4).层级选择器(空格)    (1)id层级选择器       (2)class层级选择器 5).组合选择器(逗 ...

  9. 四.使用JDBC进行批处理操作

    1 create table testbatch 2 ( 3 id int primary key, 4 name varchar(20) 5 ); 在实际的项目开发中,有时候需要向数据库发送一批SQ ...

  10. 人生苦短,LET'S GO! GO语言目录

    1.Golang开山篇,GO就是NB! 1-1.go开发工具安装 2.go-人生第一个go程序和基本语法 3.go-流程控制 4.go-函数 5.go-流程控制 6.go-复合类型 7.go-面向对象 ...