【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(‘需要过滤的东东‘);
    }
}

二、在methods中使用过滤器------在组件中定义的过滤器 

filters:{
    testFilter2(val){
        console.log(‘本地过滤器‘,val);
     }
},
methods:{
    getLocal(){
        //使用this.$options.filters[]方式获取本地过滤器
        var te = this.$options.filters[‘testFilter2‘];
         //调用本地过滤器
         te(‘需要过滤的东东‘);
    }
}    

三、在页面中使用过滤器

{{ ‘需要过滤的东东’ | testFilter2()}}

如果需要参数

{{ ‘需要过滤的东东’ | testFilter2(参数1,参数2)}}

原文地址:https://www.cnblogs.com/websmile/p/11759753.html

时间: 2024-10-31 03:38:43

【vue】过滤器的使用的相关文章

Vue过滤器

gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson05 一 过滤器写法 {{ message | Filter}} 二 Vue自带的过滤器:capitalize 功能:首字母大写 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue自带的过滤器</title> &

vue 过滤器用法

Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持). <!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div> 1.在一个组件的选项中定义本地的过滤器: filters: { w

vue 过滤器 基本用法

使用地点:双花括号插值和v-bind表达式. <div id="app"> <p>{{ message|capitalize}}</p> <div v-bind:id="message|capitalize"></div> </div> new Vue({ el:"#app", data:{ message:"pwd" }, filters:{ capit

3.Vue过滤器

1.概念: Vue.js 允许你自定义过滤器,可被用作一些常见文本的格式化,过滤器可以用在两个地方:mustache 插值和 v-bind 表达式.过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符指示: 2.过滤器调用时候的格式: 例如:下面HTML元素使用过滤器(在输出ctime的时候使用过滤器进行处理,| 管道符) <td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td> 原文地址:https:

vue过滤器 即通道符 &quot;|&quot;

1,用法:两种 <!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div> 2,定义方式:两种 1)在一个组件的选项中定义本地的过滤器:与生命周期钩子同级, filters: { capitalize: function (value) { if (!value) return '' va

Vue过滤器学习笔记(不定期更新)~~

1.json 过滤器 1 {{exp | json 4}} 将表达式exp转换为json字符串,本质上是JSON.stringify(),后面接收一个Number类型的参数,用于决定转化后的JSON字符串的缩进距离,不输默认是2

vue 过滤器

首字母大写 Vue.filter('capitalize', function (value) { if (!value) { return '' } value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) })

vue 过滤器使用的传参说明

在table中,需要对obj的数据类型进行文字转换,例如后台接口返回的姓别值:1,2.其中需要页面根据字典需要把1=>男,2=>女进行转换. 以前的习惯是每一个过滤方法都写一个方法进行转换,例如: 页面代码: <el-table-column width="200px"align="left" label="性别"> <template slot-scope="scope"> <spa

过滤器总结 微信小程序和百度智能小程序和vue过滤器

因为最近写了微信小程序和百度小程序,用到了过滤器,感觉还挺好用的,所以就来总结一下,希望能帮到你们. 1. 微信小程序过滤器: 1.1:首先建一个单独的wxs后缀的文件,一般放在utils文件夹里面.这里我命名为imgFilter.wxs(因为我项目里是用来处理图片的,哈哈) 1.2:写代码,为了方便理解,下面是一个简单的返回一个字符串拼接,当然里面的函数你想怎么处理都行,这里主要介绍思路和基本实现. var bar = function (x) { return 'hello'+ x; } m

vue的过滤器filter

前记: 排版记录,点耽误时间,我就简单的来,下面是一个vue 过滤器的写法,demo 演示,限制一个字符串的长度. vue filter 的官网介绍 https://cn.vuejs.org/v2/guide/filters.html 下面就具体拿自己的一个例子介绍: 某个filter.js // 限制汉字的个数 export const limitWordLength = Vue.filter('limitWordLength', (str, length, sufix) => { /* es