过滤器是一种在模板中处理数据的便捷方式,特别适合对字符串和数组进行简易显示

    <div id="app">
<p>商品1花费{{oneCost | fromatCost}}</p>
<p>商品2花费{{towCost | fromatCost}}</p>
<p>商品3花费{{treCost | fromatCost}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
oneCost:,
towCost:,
treCost:,
},
filters:{
fromatCost(vlue){
return "¥" + (vlue/).toFixed();
}
}
})
</script>

  上述代码简化了代码,重复度也很少,更加易读,可维护性也更好,同时达到了从分到元,保留两位小数,同时新增¥。

  还可以进行链式操作。如果有一个round过滤器,可以四舍五入  {{treCost |  round | fromatCost }} 使用此种方式可以同时使用两个过滤器,首先会调用round过滤器,然后将值传入fromatConst 进行处理,然后输出到页面

  除了在插值中使用,还可以在v-bind中使用过滤器   v-bind:value = "oneCost | fromatCost"

  也可以在使用Vue.filter() 来注册一个全局的过滤器,让整个应用都可以用到。可以将过滤器放到单独的filters.js文件中

  
  注意事项:

    1.过滤器是组件中唯一不能使用this来访问数据或方法的地方。因为过滤器应该是纯函数,同样的输入,每次都返回同样的输出,而不涉及任何外部数据。想要访问外部数据因该将其作为参数传入;

    2.只可以在插值和v-bind指令中使用过滤器,在vue1中可以在任何地方使用表达式的地方使用,在vue2中取消了这样的做法

VUE过滤器 基础回顾5的更多相关文章

  1. Vue 过滤器与计算属性

    过滤器 V1.x 版本 过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档,http://cn.vuejs.org/ ...

  2. vue 快速入门 系列 —— vue 的基础应用(上)

    其他章节请看: vue 快速入门 系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello- ...

  3. [C#] C# 基础回顾 - 匿名方法

    C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...

  4. Javascript基础回顾 之(三) 面向对象

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  5. Javascript基础回顾 之(二) 作用域

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  6. Javascript基础回顾 之(一) 类型

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  7. JavaScript 基础回顾——对象

    JavaScript是基于对象的解释性语言,全部数据都是对象.在 JavaScript 中并没有 class 的概念,但是可以通过对象和类的模拟来实现面向对象编程. 1.对象 在JavaScript中 ...

  8. 四、Android学习第四天——JAVA基础回顾(转)

    (转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 四.Android学习第四天——JAVA基础回顾 这才学习Android的 ...

  9. 1、java基础回顾与加强

    一.    基础回顾 1   集合 1.1  集合的类型与各自的特性 ---|Collection: 单列集合 ---|List: 有存储顺序, 可重复 ---|ArrayList:    数组实现, ...

随机推荐

  1. postgresql cstore_fdw安装与性能测试

    据介绍,cstore_fdw实现了 PostgreSQL 数据库的列式存储.列存储非常适合用于数据分析的场景,数据分析的场景下数据是批量加载的.这个扩展使用了Optimized Row Columna ...

  2. PostgreSQL DISTINCT 和 DISTINCT ON

    select语句中,使用distinct关键字,在处理select list后,结果表可以选择消除重复的行.在SELECT之后直接写入DISTINCT关键字以指定此关键字: SELECT DISTIN ...

  3. 前端文章索引:HTML+CSS+JS

    1 HTML 1.1 HTML5 HTML5 – 1.基础 HTML5 – 2.新元素 HTML5 – 3.加强版ol HTML5 – 4.canvas 2 CSS 2.1 CSS3 CSS3–1.c ...

  4. vue---将json导出Excel的方法

    在做数据表格渲染的时候,经常遇到的需求的就是将导出excel,下面是使用vue进行项目数据进行导出的方法. 一.安装依赖 npm i -S file-saver npm i -S xlsx 二.在sr ...

  5. zabbix删除dashboard无用的报警信息issue

    zabbix出现性能问题,于是清理了一下数据表,在 zabbix_server 端出现性能问题的时候,有大量的插入数据库操作无法执行,触发了大规模服务器不可达的报警经过搜索发现这些信息是跨表联合查询出 ...

  6. JS 生成随机字符串 随机颜色

    使用Math.random()生成随机数 0.7489584611780002数字的.toString(n) 将数字转换为 n 进制的字符串 n取值范围(0~36)"0.vbpjw8lipf ...

  7. Zabbix 3.0 配置企业微信报警(注册---测试)

    一.申请企业微信 1.登录企业微信官网,点击企业注册 二.配置企业微信 1.邀请管理员使用企业微信,如果有多个人直接添加新成员 2.管理员收到邀请,下载手机版企业微信,使用微信号登陆即可 3.创建应用 ...

  8. CentOS升级kernel

    CentOS升级kernel 升级命令: yum update kernel yum update kernel-devel yum update kernel-firmware yum update ...

  9. nginx的rtmp搭建流媒体服务器实现直播流

    最近自己搞了一个用nginx的rtmp来搭建流媒体服务器,从而实现直播的过程,参考了网上很多资料,有些资料对于初学者来说比较难以理解,在此将我搭建的过程记录下来,分享给大家. 1.下载nginx-rt ...

  10. CSP2019初赛游记

    没想到居然ak了,就纪念一下吧. 这次的联赛,只能说是高三生活的一缕杂音了吧. 这次,我的心态可以说是非常平稳了.毕竟不再会有竞赛生涯的压力,也不会有患得患失的惶恐.不过也许我开考前的放声唱歌惊扰了一 ...