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

    <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. vue-cli安装webpack项目及初始配置

    这个下载包是自己基于 webpack 搞的,可以看看https://github.com/chichengyu/webpack vue-cli安装 输入 npm install vue-cli -g ...

  2. Shared variable in python's multiprocessing

    Shared variable in python's multiprocessing https://www.programcreek.com/python/example/58176/multip ...

  3. Android外接USB扫码枪

    公司的设备以前接入的都是串口的扫码头,优点是直接通过串口读取流里面的数据就OK了,缺点是你需要知道每一款扫码器的型号以获取波特率及Android设备的串口地址.因为现在usb扫码器越来越方便且即插即用 ...

  4. 【npm permission denied错误】npm ERR! Error: EACCES: permission denied, access

    在命令前加上 sudo sudo npm install --save-dev grunt 不过这样子可能还是不行,你需要这样: sudo npm install --unsafe-perm=true ...

  5. 超级简单,把PuppyLinux安装到U盘

    先说说使用感受:上网全是乱码!不支持中文 下载最新版puppylinux,从官网下载 现在U盘引导程序制作工具Unetbootin 打开下载的UNetbootin,进行下面的操作: 制作完毕后,修改U ...

  6. Zabbix使用主动模式进行监控配置方法

    一直都是在用Zabbix的被动模式(即默认模式)进行监控. 但是总有些情况是不适用被动模式的,刚好工作上有这个需求,于是捣鼓了一下,发现配置起来也挺简单的. (1)Agent配置 修改Zabbix-a ...

  7. OTP详解

    OTP(One Time Programmable)是单片机的一种存储器类型,意思是一次性可编程:程序烧入单片机后,将不可再次更改和清除. 随着嵌入式应用的越来越广泛,产品的安全也显得越来越重要.一方 ...

  8. ThreadLocal源代码3

    public class ThreadLocal1<T> { //当创建了一个 ThreadLocal 的实例后,它的散列值就已经确定了, //threadLocal实例的hashCode ...

  9. 【转帖】HBase简介(梳理知识)

    HBase简介(梳理知识)   https://www.cnblogs.com/muhongxin/p/9471445.html 一. 简介 hbase是bigtable的开源山寨版本.是建立的hdf ...

  10. autocomplete undefined一例解决办法

    项目中一个页面jqueryui与extjs混用.当使用autocomplete时,会报undefined. 解决办法增加 var jq = jQuery.noConflict(true); 然后使用j ...