使用地点:双花括号插值和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. Java开源生鲜电商平台-订单抽成模块的设计与架构(源码可下载)

    Java开源生鲜电商平台-订单抽成模块的设计与架构(源码可下载) 说明:订单抽成指的是向卖家收取相应的信息服务费.(目前市场上有两种抽成方式,一种是按照总额的抽成比率,另外一种是按照订单明细的抽成比率 ...

  2. sql server 高可用故障转移(完结)

    安装完二个sql server 节点后,对外的虚拟ip是192.168.2.105 测试将sql server转到另一节点 转移后连接sql 虚拟ip 测试 通过windows日志查看远行状态 总结 ...

  3. 玩转Spring MVC (一)---控制反转(依赖注入)

    Spring的核心是控制反转,什么是控制反转呢?小编浅述一下自己的拙见,有不当之处还希望大家指出. 控制反转(IOC),也可以叫做依赖注入(DI),这两个词其实是一个概念. 控制反转,那是什么控制被反 ...

  4. 新浪微博注册(elenium Python 自动化)

    from selenium import webdriverfrom selenium.webdriver.common.keys import Keysfrom time import sleep ...

  5. Java - Instrumentation

    使用JRebel启动工程时加上VM参数时有一个参数是"-javaagent:D:\jrebel_5.6.0\jrebel.jar". javaagent是什么? java -hel ...

  6. multiWriter.go

    package blog4go import ( "errors" "fmt" ) var ( // ErrFilePathNotFound 文件路径找不到 E ...

  7. nsq理解

    核心概念 在讨论NSQ如何在实践中使用前,先理解NSQ队列的架构原理是非常值得的.它的设计很简单,可以通过几个核心概念来理解. Topic --一个topic就是程序发布消息的一个逻辑键,当程序第一次 ...

  8. openstack学习(1)

    OpenStack项目结构 OpenStack架构 1. horizon以图形的方式管理所有的project,包括nova虚拟机的创建,neutron网络,cinder存储,glance镜像等:    ...

  9. Vue学习小结(一)安装依赖与数据来源

    不多说啥了,生活中都是各种阵痛与惊喜.最近在学习vue框架,刚写完一个小型的后台管理系统(https://github.com/michaelzhengzm/info-manager-systerm_ ...

  10. Nginx+Keepalived 集群方案

    1.Keepalived高可用软件 Keepalived软件起初是专为LVS负载均衡软件设计的,用来管理并监控LVS集群系统中各个服务节点的状态,后来又加入了可以实现高可用的VRRP功能.因此,kee ...