vue中过滤器filters的使用

组件内写法

filters:{
    filter:function(data,arg1,arg2){
        return ....
    }
}

全局写法

filters(‘filter‘,function(data,arg1,arg2){
    retrun ....
})

1.在html中使用
{{ msg | filter(‘arg1‘,‘arg2‘) }}
// msg对应函数中的第一个参数data,arg1为第二个参数,类推
2.methods中使用,并传参
methods:{
    fn(){
        let filter = this.$options.filters[‘filter‘]
        let data = filter(this.msg,arg1,arg2)
    }
}
3.在v-html中使用filters
<p v-html="$options.filters.filter(this.msg,arg1,arg2)"></p>

原文地址:https://www.cnblogs.com/sexintercourse/p/10231122.html

时间: 2024-08-29 23:02:30

vue中过滤器filters的使用的相关文章

vue中filters(过滤器)的使用

在vue中使用filters Vue.js自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式.过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符号指示: <!-- 在双花括号中 --> <!-- message作为capitalize的第一个参数 --> {{ message | capitalize }} <!-- 如果有多个参数,message作为第一个参数,其它参数写在capit

vue中引入公用过滤器?

比如我们封装一个金钱的过滤器: 不废话,直接上代码 在main.js平级新建filter文件夹,里面新建index.js和money.js index.js import { moneyP } from './money' export default moneyP; 注意这里不要用module.exports导出了,会报错. // module.exports = { // normalTime // } money.js里面 function fmoney(s){ let n = 2; n

vue自定义过滤器的创建和使用

过滤器:生活中有很多例子,净水器 空气净化器 .过滤器的作用:实现数据的筛选.过滤.格式化. vue1.*版本是有内置的过滤器,但是在vue2.*所有的版本都已经没有自带的过滤器了. 1.过滤器创建 过滤器的本质 是一个有参数 有返回值的方法 new Vue({ filters:{ myCurrency:function(myInput){ return 处理后的数据 } } }) 2.过滤器使用语法: <any>{{表达式 | 过滤器}}</any>举个例子: <h1>

vue之过滤器

在vue2.0以前的版本中vue内置的过滤器,但是因为缺乏纯JavaScript的灵活性,现在vue2.0版本中已经删除了内置过滤器,所以需要自己注册过滤器,我们可以定义本地(在某一个template里面定义filter)过滤器,或者定义全局(global)过滤器.需要提醒的是,如果你定义了一个全局过滤器,它必须在Vue实列之前定义,以上两种方式,我们将传递value作为参数. 全局过滤器 下面定义一个全局过滤器,用于在数据前加上大写的VUE.需要注意的是,过滤器定义必须始终位于Vue实例之上,

Vue的过滤器,生命周期的钩子函数和使用Vue-router

一.过滤器 1.局部过滤器 在当前组件内部使用过滤器 给某些数据 添油加醋 //声明 filters:{ '过滤器的名字':function(val,a,b){ //a 就是alax ,val就是当前的数据 } } //使用 管道符 数据 | 过滤器的名字('alex','wusir') <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8">

vue:过滤器

一.过滤器 过滤器是vue中的一个特性,作用是用于对文本进行格式化的作用. 注意:在vue 1.0中有内置的过滤器,在2.0中去掉了内置过滤器,只有自定义过滤器 二.使用位置 过滤器只能应用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).例如: <!--在双花括号中使用 格式:{{值 | 过滤器的名称}}--> <div>{{3 | addZero}}</div> <!--在v-bind中使用 格式:v-bind:id=&qu

对vue中的computed属性,watch监听,计算属性理解

自己的理解: computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理: computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化,举例:购物车里面的商品列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化.这里的这个总金额使用computed属性来进行计算是最

【vue】过滤器的使用

一.在methods中使用过滤器------全局定义的过滤器 //main.js中 import Vue from 'vue' Vue.filter('testFilter1',function(val){ console.log("全局过滤器",val); }) //demo.js methods:{ getGlobal(){ //使用Vue.Filter()方式获取全局过滤器 var te = Vue.filter('testFilter1'); //调用全局过滤器 te('需要过

vue.js 过滤器

vue的过滤器可以用来对数据进行格式化 1.过滤器注册 过滤器注册分为全局注册和局部注册 (1)全局注册:所有的组件中都能使用 语法:Vue.filter(过滤器名称,回调函数) 回调函数的参数就是需要过滤处理的数据 //入口文件 main.js import Vue from 'vue' import App from './App' import router from './router' Vue.filter('toUpperCase',function(val){ return val