Vue自定义域过滤器和管道符

一、过滤器的分类与语法格式

1、本地过滤器（局部过滤器）：

var vm = new Vue({filters:{}
})

例一：实现一个对首字母大写的过滤器

<!-- 过滤器可以使用于{{}}文本插值和v-bind指令中 -->
<div id="filter"><h4>例1：实现一个对数据首字母大写的过滤器</h4><p>{{name | capitalize}}</p><a href="" :title="title | zhifou">知否知否，应是绿肥红瘦</a>
</div>

var filter = new Vue({el:'#filter',data:{name:'zanilia',message:'family',title:'知否'},filters:{capitalize:value=>{//value 将来使用过滤器的数据的取值return value.charAt(0).toUpperCase() + value.slice(1);},zhifou:value=>{return value + "--赵丽颖"}}
})

2、全局过滤器

定义在所有Vue实例以外的过滤器被称为“全局过滤器”。

例二、实现所有字母大写

<div id="filter"><h4>例2：实现所有字母大写</h4><p>{{message | upper}}</p>
</div>

Vue.filter('upper',value=>{return value.toUpperCase()
})

二、带参数的过滤器

例3：制作一个名为readMore的过滤器，将指定字符个数以外的文本利用省略符实现

<div id="filter2"><h4>例3：制作一个名为readMore的过滤器，将指定字符个数以外的文本利用省略符实现</h4><p>{{sheng | readMore('132','...')}}</p>
</div>

var filter2 = new Vue({el:'#filter2',data:{sheng:'盛明兰出生于江南官宦人家，身为家中最不受宠爱的女儿，自幼所处父亲不重视，姐妹欺压难缠的困境，不仅生存艰难，深宅之中更处处深藏意想不到的危机所幸明兰知命却不受命运摆弄，在万般打压之下依然自强自立，一路小心谨慎洞察世事，凭借自己的聪慧隐忍与祖母的栽培点拨，从在家中备受冷落欺凌，到成为影响着家族兴荣的举足轻重的人物，一路完成从闺阁少女到侯门主母的前进励志人生之路。'},filters:{readMore:function(text,length,char){/*text作为第一个参数，永远表示需要过滤的数据*/return text.slice(0,length) + char;}}
})

三、过滤器的串联

例4：对数据保留两位小数并添加货币符号

<div id="number"><h4>例4：对数据保留两位小数并添加货币符号(过滤器的串联)</h4>{{price | sumA(2) | sumB('￥')}}
</div>

var number = new Vue({el:'#number',data:{price:156.2349},filters:{sumA:function(price,n){/*toFixed(n):将数值转换为定点实数的形式的字符串，且保留n位小数并四舍五入。*/return price.toFixed(n)},sumB:function(price,char){return char + price}}
})

Vue自定义域过滤器和管道符相关推荐

Vue中的过滤器(filter)
一.Vue中的过滤器是什么过滤器(filter)是输送介质管道上不可缺少的一种装置,大白话,就是把一些不必要的东西过滤掉,过滤器实质不改变原始数据,只是对数据进行加工处理后返回过滤后的数据再进行调用 ...
Vue.js中过滤器（filter）的使用
Vue.js 过滤器的基本使用(filter) vue中的过滤器分为两种:局部过滤器和全局过滤器.全局过滤器定义在vue类中,句柄过滤器定义在vue实例中. 1.定义无参全局过滤器 Vue.filte ...
vue学习日志-过滤器
一.过滤器 1.1 概述 (1)过滤器(Filters)提供了一种执行文本转换的方法,比如说都转换成大写字母或者几乎做任何我们想做的事情. (2)过滤器既可以在双花括号插值中使用,也可以在 v- ...
Vue中filters过滤器无效的原因
Vue中filters过滤器无效的原因如果你的过滤器内部需要用到循环请不要使用map函数代替for循环或者是foreach循环如图: 因为过滤器本身需要一个return 把结果返回出去然而ma ...
Vue中的过滤器学习
在Vue中使用过滤器(Filters)来渲染数据是一种很有趣的方式.首先我们要知道,Vue中的过滤器不能替代Vue中的methods.computed或者watch,因为过滤器不改变真正的data,而 ...
【Vue】全局过滤器和局部过滤器
Vue.js 允许自定义过滤器,可用作一些常见的文本格式化.过滤器可以用在两个地方:mustache 插值和 v-bind 表达式,被添加在 JavaScript 表达式的尾部,由管道符 (" ...
vue学习笔记（一） ---- vue指令（过滤器）
一.什么是过滤器官方文档:https://cn.vuejs.org/v2/guide/filters.html 二.过滤器的使用没有使用过滤器之前: <div id="app&qu ...
vue中的过滤器文本格式化
过滤器 Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化.由"管道符"指示, 格式如下: {{ message | capitalize }} < div v-b ...
教女朋友学习 vue中的过滤器及其时间格式化
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法感兴 ...

Vue自定义域过滤器和管道符

一、过滤器的分类与语法格式

1、本地过滤器（局部过滤器）：

例一：实现一个对首字母大写的过滤器

2、全局过滤器

例二、实现所有字母大写

二、带参数的过滤器

例3：制作一个名为readMore的过滤器，将指定字符个数以外的文本利用省略符实现

三、过滤器的串联

例4：对数据保留两位小数并添加货币符号

Vue自定义域过滤器和管道符相关推荐

最新文章

热门文章