使用地点:双花括号插值和v-bind表达式。

<div id="app">
<p>{{ message|capitalize}}</p>
<div v-bind:id="message|capitalize"></div>
</div>
new Vue({
el:"#app",
data:{
message:"pwd"
},
filters:{
capitalize:function(value){
return value+'a'
}
}
})

注意:过滤器函数接收的第一个值是message,依次是传的值。
过滤器是可以叠加的,后面过滤器接收前面过滤器的返回值。

<div id="app">
<div v-bind:id="message|capitalize('a','b')|gl"></div>
</div>
var app=new Vue({
el:"#app",
data:{
pwd:"pwd"
},
filters:{
capitalize:function(value,x,y){
return value+x+y;
},
gl:function(value){
value=value.toString();
return value.toUpperCase();
}
}
})

vue 过滤器 基本用法的更多相关文章

  1. 第六节:Vue过滤器的用法和自定义过滤器

    1.过滤器的用法,用  '|' 分割表达式和过滤器. 例如:{{ msg |  filter}}     {{msg | filter(a)}}  a就标识filter的一个参数. 用两个过滤器:{{ ...

  2. 换个角度使用VUE过滤器

    换个角度使用VUE过滤器 过滤器在Vue中的主要用于文本格式化,如小写转大小,日期格式化等操作.官方对这个功能介绍也很简单,不过确实很简单,就一个函数而已.但最近在做两款APP时,遇到一些特殊的需求. ...

  3. 带你掌握Vue过滤器filters及时间戳转换

    摘要:Vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法. 本文分享自华为云社区<三分钟掌握Vue过滤器filters及时间戳转换& ...

  4. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  5. Vue 过滤器的使用

    Vue官方文档是这样说的:Vue过滤器用于格式化一些常见的文本. 在实际项目中的使用: 定义过滤器 在src定义一个filter.js文件,里面定义过滤器函数,在最后要使用 exprot defaul ...

  6. checkbox在vue中的用法小结

    关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...

  7. checkbox在vue中的用法总结

    前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样, 之前对于 ...

  8. vue 过滤器filters的使用以及常见报错小坑(Failed to resolve filter)

    今天使用vue 过滤器中发现一个小坑,网上查到的大都是不正确的解决方法,故分享给大家: 原错误代码: // 过滤器 filter:{ FdishList:function(value){ if (!v ...

  9. vue过滤器微信小程序过滤器和百度智能小程序过滤器

    因为最近写了微信小程序和百度小程序,用到了过滤器,感觉还挺好用的,所以就来总结一下,希望能帮到你们. 1. 微信小程序过滤器: 1.1:首先建一个单独的wxs后缀的文件,一般放在utils文件夹里面. ...

随机推荐

  1. 《Linux/Unix系统编程手册》 时间子系统

    Linux下操作系统编程有两本经典APUE即<Advanced Programming in the UNIX Environment>和TLPI<The Linux Program ...

  2. Shell 起停脚本 专题

    To list any process listening to the port 8080: lsof -i:8080To kill any process listening to the por ...

  3. AbstractRoutingDataSource实现动态数据源切换 专题

    需求:系统中要实现切换数据库(业务数据库和his数据库) 网上很多资料上有提到AbstractRoutingDataSource,大致是这么说的 在Spring 2.0.1中引入了AbstractRo ...

  4. 你不知道的JavaScript--Item23 定时器的合理使用

    1.定时器概述 window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval.其中前者可以使一段代码在指定时间后运行:而后者则可 ...

  5. nagios监控mysql主机,nginx,磁盘IO,网卡流量

    http://blog.chinaunix.net/uid-28685162-id-3506260.html nagios安装完成,打开/usr/local/nagios/etc/nagios.cfg ...

  6. 玩转spring MVC(七)----拦截器

    继续在前边的基础上来学习spring MVC中拦截器的使用,下面通过一个例子来实现(完整项目在这里下载:http://download.csdn.net/detail/u012116457/84334 ...

  7. 如何将网页保存为PDF文件

    怎样将网页保存为PDF文件... 问题: 很多时候我们需要将网页上的内容,在排版不变的情况下完整的保存下来,那么用pdf格式是最好的效果了,还图文并茂,效果与真实的网页很相似,如果另存为网页的话,会下 ...

  8. Elasticsearch笔记三之版本控制和插件

    版本控制 1:关系型数据库使用的是悲观锁,数据被读取后就被锁定其他的线程就无法对其进行修改. 2:ex使用的是乐观锁,数据被读取后其他程序还可以对其进行修改,而执行修改时发现此数据已经被修改则修改就会 ...

  9. C++中使用引用作为函数参数的优点

    1.传递引用给函数与传递指针的效果是一样的.这时,被调函数的形参就成为原来主调函数中的实参变量或对象的一个别名来使用,所以在被调函数中对形参变量的操作就是对其相应的目标 对象(在主调函数中)的操作. ...

  10. BZOJ_1100_[POI2007]对称轴osi_KMP+计算几何

    BZOJ_1100_[POI2007]对称轴osi_KMP+计算几何 Description FGD小朋友——一个闻名遐迩的年轻数学家——有一个小MM,yours.FGD小朋友非常喜欢他的MM,所以他 ...