Vue教程:过滤器filters(五)
Vue.js
允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值
和 v-bind 表达式
(后者从 2.1.0+
开始支持)。过滤器应该被添加在 JavaScript
表达式的尾部,由“管道”符号指示:
<!-- 在双花括号中 -->
{{ message | capitalize }} <!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
组件中定义过滤器
你可以在一个组件的选项中定义本地的过滤器:
如下:
html代码:
<div id="app">
<input type="text" v-model="message" />
{{message | capitalize }}
</div>
JS代码:
var vm=new Vue({
el:"#app",
data:{
message:''
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
全局定义过滤器
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中,capitalize
过滤器函数将会收到 message
的值作为第一个参数。
Vue.filter()
语法:Vue.filter( id, [definition] )
参数:
{string} id
{Function} [definition]
用法:注册或获取全局过滤器。
// 注册
Vue.filter('my-filter', function (value) {
// 返回处理后的值
}) // getter,返回已注册的过滤器
var myFilter = Vue.filter('my-filter')
串联过滤器
{{ message | filterA | filterB }}
在这个例子中,filterA
被定义为接收单个参数的过滤器函数,表达式 message
的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数filterB
,将 filterA
的结果传递到 filterB
中。
过滤器是 JavaScript 函数,因此可以接收参数:
{{ message | filterA('arg1', arg2) }}
这里,filterA
被定义为接收三个参数
的过滤器函数。其中 message
的值作为第一个参数,普通字符串 'arg1'
作为第二个参数,表达式 arg2
的值作为第三个参数。
Vue教程:过滤器filters(五)的更多相关文章
- vue使用过滤器 filters:{}
在项目开发过程中,经常会用到过滤器,下面就来说说我用的用法 我从后台获取到一个时间字段,是2017-03-23的格式,但是我要的是年月日分开显示,那就要用到过滤器了 在没有用过滤器的时候,是这样的: ...
- Vue学习之--------Vue中过滤器(filters)的使用(代码实现)(2022/7/18)
1.过滤器 1.1 概念 过滤器: 定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理). 语法: 1.注册过滤器:Vue.filter(name,callback) 或 new V ...
- vue中过滤器filters的使用
组件内写法 filters:{ filter:function(data,arg1,arg2){ return .... } } 全局写法 filters('filter',function(data ...
- 带你掌握Vue过滤器filters及时间戳转换
摘要:Vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法. 本文分享自华为云社区<三分钟掌握Vue过滤器filters及时间戳转换& ...
- vue教程2-06 过滤器
vue教程2-06 过滤器 过滤器: vue提供过滤器: capitalize uppercase currency.... <div id="box"> {{msg| ...
- vue 过滤器filters的使用以及常见报错小坑(Failed to resolve filter)
今天使用vue 过滤器中发现一个小坑,网上查到的大都是不正确的解决方法,故分享给大家: 原错误代码: // 过滤器 filter:{ FdishList:function(value){ if (!v ...
- vue教程(二)--过滤器和监视改动功能
过滤器filter: 1.将数据进行添油加醋的操作. 2.过滤器分两种: 组件内的过滤器(组件内有效). 全局过滤器 组件内:filters:{过滤器名:过滤器函数fn},fn内通过return 返回 ...
- Vue自定义过滤器
gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...
- vue filter过滤器简单应用
vue中过滤器,用于一些常见的文本格式化,用 | 来操作. 过滤器可以用在两个地方: 1.在{{}}双花括号中插入值 2.v-bind表达式中使用 <!-- 在双花括号中 --> {{ m ...
- vue:过滤器
一.过滤器 过滤器是vue中的一个特性,作用是用于对文本进行格式化的作用. 注意:在vue 1.0中有内置的过滤器,在2.0中去掉了内置过滤器,只有自定义过滤器 二.使用位置 过滤器只能应用在两个地方 ...
随机推荐
- 前端面试经典题目合集(HTML+CSS)一
1.说说你对HTML语义化的理解? (1)什么是HTML语义化? 根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析. ( ...
- Android SurfaceView播放视频时横竖屏的调整
对于横屏录制的视频就横屏播放,对于竖屏录制的视频就竖屏播放. 在mainifest文件里对负责播放的Activity添加以下属性“ android:configChanges="orient ...
- Service Discovery in WCF 4.0 – Part 1 z
Service Discovery in WCF 4.0 – Part 1 When designing a service oriented architecture (SOA) system, t ...
- 使用FMDB最新v2.3版本教程
使用FMDB教程 本教程针对于第一次接触开源库FMDB的同胞,从如何下载源码如何导入工程如何创建数据库如何写增删改查开始.使用的时最新版本的FMDB v2.3. 此教程开始日期为 2014.5.5 P ...
- NSJSONSerialization能够处理的JSONData
NSJSONSerialization能够处理的JSONData You use the NSJSONSerialization class to convert JSON to Foundation ...
- mysql io过高
背景: 晚上,公司业务群里发信息说,有玩家在游戏里面赠送别人礼物后,赠送记录在20多分钟以后才出现,延时太高. 问题: 公司数据库使用mysql,配置了主从.配置的是,游戏程序写数据到主库,读数据到从 ...
- June 22nd 2017 Week 25th Thursday
Happiness is when the desolated soul meets love. 幸福是孤寂的灵魂遭遇爱的邂逅. When living alone for a long period ...
- GO语言(四)线程通信
package main import "fmt" func fibon(c,quit chan int) { x,y := , for { select { case c < ...
- [原]零基础学习在Android进行SDL开发后记
本着学习交流记录的目的编写了这个系列文章,主要用来记录如何从零开始学习SDL开发的过程,在这个过程中遇到了很多问题,差点就放弃了.首先是SDL的Android移植的时候遇到了比较坑的是SDL移植到An ...
- 51nod 1832 先序遍历与后序遍历【二叉树+高精度】
题目链接:51nod 1832 先序遍历与后序遍历 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 对于给定的一个二叉树的先序遍历和后序遍历,输出有多少种满足条件的 ...