Vue之在methods中使用filter的方法

小灰灰 2024-04-18 09:29 1阅读 0赞

### Vue之在methods中使用filter的方法 ###

*   *  全局定义filter
     *  在html使用filter
     *  在methods使用filter

相关资料：

*  [过滤器(Vue官方使用说明)][Vue]

## 全局定义filter ##

在`main.js`或者其他定义全局`filter`

Vue.filter('capitalize', function (value) { 
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    })
    
    new Vue({ 
      // ...
    })

那当然，也可以在当前组件中定义`filter`，这是针对当前组件使用的。

filters: { 
      capitalize: function (value) { 
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }

## 在html使用filter ##

基本使用

{
       { message | capitalize }}
    
    
    <div v-bind:id="rawId | formatId"></div>

过滤器可以串联：

<div>
    	{
       { message | filterA | filterB }}
    </div>

过滤器是 JavaScript 函数，因此可以接收参数：

<div>
    {
       { message | filterA('arg1', arg2) }}
    </div>

## 在methods使用filter ##

methods: { 
    	func: (){ 
    		const value = 'john';
    		// let f1 = Vue.filters['filterName'] (value);
    		let f2 = this.$options.filters['capitalize'](value);  // 直接调用全局的filters
    		console.log(f2); // John
    	}
    }

[Vue]: https://cn.vuejs.org/v2/guide/filters.html

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue之在methods中使用filter的方法

Vue之在methods中使用filter的方法 * * 全局定义filter * 在html使用filter * 在methods使...

小灰灰/ 2024年04月18日 09:29/ 0 赞/ 2 阅读

相关在vue项目中使用iconfont的方法

1:百度iconfont,找到阿里巴巴矢量图标库官网,https://www.iconfont.cn/然后注册登录,或者用github登录也行,此步骤跳过; 2、搜索需要的i

逃离我推掉我的手/ 2023年07月09日 08:26/ 0 赞/ 72 阅读

相关 Vue项目中，在filters中使用this（Vue实例对象）

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

男娘i/ 2023年01月18日 12:23/ 0 赞/ 107 阅读

相关 vue中过滤器filters的使用

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

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

相关在method里面调用filter里的方法 vue

this.$options.filters['arrFormatter'](v,this.that) 'arrFormatter' 为filter里面的方法名；(v

忘是亡心i/ 2022年12月26日 08:11/ 0 赞/ 148 阅读

相关 Vue.js中过滤器（filter）的使用

一. vue的过滤器是什么？ Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.

「爱情、让人受尽委屈。」/ 2022年11月03日 00:56/ 0 赞/ 217 阅读

相关 jQuery中filter方法的简单使用

1、举个简单的栗子：我们想给select标签在页面初始化完成后设置一个默认值，咱们一般用简单的循环去实现元素节点的查找（比较浪费性能），当前可以通过jQuery选

亦凉/ 2022年01月14日 12:55/ 0 赞/ 186 阅读

相关在vue中使用sass的配置的方法

1、安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass

比眉伴天荒/ 2021年12月24日 14:57/ 0 赞/ 319 阅读

相关 Vue之在methods中使用filter的方法

转载自：https://www.jianshu.com/p/70dc9ca9f354 1、filter有两种方式 > 设置全局的filter的方法 Vue.fil

秒速五厘米/ 2021年09月20日 06:24/ 0 赞/ 812 阅读

相关 vue的methods方法中如何使用filter

原来我们看到的过滤器使用一般都是这种形式 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG

你的名字/ 2021年08月26日 16:17/ 0 赞/ 456 阅读