学习笔记——vue中的过滤器filters

古城微笑少年丶 2022-12-24 00:56 170阅读 0赞

--------------------

> 在vue中，当使用双大括号\{ \{\}\}或者v-bind绑定输出指定的值（固定的格式）时，可以通过指定过滤器，来将其转化为所需要格式的值。例如：日期。

### 1.在组件中使用filters：  ###

<div>过滤前：{
       { date }}</div>
    <div>过滤后：{
       { date | formatDate }}</div>

data() {
        return {
            date: new Date()
    	};
    },
    filters: {
        formatDate(val) {
            let newDate = ''
    		let year = val.getFullYear()
    		let month = val.getMonth() + 1
    		let day = val.getDate()
    		newDate = year + '-' + month + '-' + day
    		return newDate
    	}
    }

![20201126104254681.png][]

### 2.在js中使用filters： ###

Vue.filter('formatDate', function (val) {})

###  3.filters可以串联： ###

> filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中

{
       { message | filterA | filterB }}

###  4.filters可以接收多个参数： ###

> filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。

{
       { message | filterA('arg1', arg2) }}

> 以上就是vue中过滤器的基本使用。通过过滤器，能提高代码的服用。

--------------------

[20201126104254681.png]: /images/20221120/7a3e2e81c5df4fe39ac2b235b4f66ccd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，170人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中过滤器filters的使用

组件内写法 filters:{ filter:function(data,arg1,arg2){ return ....

﹏ヽ暗。殇╰゛Y/ 2023年01月12日 11:49/ 0 赞/ 230 阅读

相关 vue 过滤器 filter

<body> <div id="app"> <input type="text" v-model='msg'> <div>{

超、凢脫俗/ 2023年01月08日 04:22/ 0 赞/ 198 阅读

相关学习笔记——vue中的过滤器filters

-------------------- > 在vue中，当使用双大括号\{ \{\}\}或者v-bind绑定输出指定的值（固定的格式）时，可以通过指定过滤器，来将其转化为所

古城微笑少年丶/ 2022年12月24日 00:56/ 0 赞/ 171 阅读

相关 vue 过滤器 filters

过滤器通过某种逻辑统一修改多条数据过滤器分为局部过滤器和全局过滤器局部过滤器 new Vue({ el: ....

╰半橙微兮°/ 2022年11月29日 12:23/ 0 赞/ 256 阅读

相关 vue中用过滤器filter

当name名超过15个字符的时候，只显示15个字符，超出部分用省略号显示第一种方法三目运算符判断 <span class="userName"> { {

亦凉/ 2022年11月27日 03:30/ 0 赞/ 212 阅读

相关 Vue中的过滤器（filter）

什么是过滤器？顾名思义，过滤器就是就对数据进行筛选、过滤、格式化，比如时间格式化、英文大小写转换、状态转换等等。它与methods、computed 或者 wa

野性酷女/ 2022年10月02日 11:54/ 0 赞/ 217 阅读

相关 vue中的过滤器 filter

一、vue过滤器概念 \+ 概念：Vue.js 允许你自定义过滤器，\\可被用作一些常见的文本格式化\\。 \+ 过滤器可以用在两个地方：\\mustache 插值和 v

旧城等待，/ 2022年01月12日 07:39/ 0 赞/ 271 阅读

相关 Vue中的Filter过滤器

局部过滤器 <template> <div class="home"> <div class="time">{ { item.rate

悠悠/ 2021年09月19日 11:38/ 0 赞/ 537 阅读

相关 Vue中的过滤器（filter）

目录过滤器使用位置全局过滤器、局部过滤器全局过滤器：局部过滤器：过滤器中传入多个参数：多个过滤器串联： --------------------

柔光的暖阳◎/ 2021年07月25日 13:48/ 0 赞/ 618 阅读

相关 vue filter过滤器

过滤器方式一:局部过滤器 1、与data同级 filters:{ xx:function(value)

拼搏现实的明天。/ 2021年07月24日 18:56/ 0 赞/ 482 阅读