Vue.js 的过滤器你了解多少

2024-12-08 00:02:58

一、过滤器作用

过滤器用于进行文本内容格式化处理。

二、过滤器的使用方式

过滤器可以在插值表达式和 v-bind 中使用。

三、过滤器的分类

全局过滤器
局部过滤器

四、全局过滤器

全局过滤器可以在任意Vue实例中使用。

语法书写方式如下：

Vue.filter('过滤器名称'，function(value) {
        //逻辑代码
        return '处理结果';
})

注意：示例中的 | 竖线表示管道符。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>15.全局过滤器</title>
</head>
<body>
  <div id="app">
    <p v-bind:title="value | filterA">这是标签</p>
    <p>{{ value | filterA }}</p>
  </div>
  <div id="app2">
    <p v-bind:title="value | filterA">这是标签</p>
    <p>{{ value | filter}}</p>
  </div>
  <script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
  <script>
    Vue.filter('filterA',function (value) {
      return value.split('-').join('');
    })
    new Vue({
      el: '#app',
      data: {
        value: 'a-b-c'
      }
    })
    new Vue({
      el: '#app2',
      data: {
        value: 'a-b-c'
      }
    })
  </script>
</body>
</html>

• 全局过滤器可以将一个数据传入到多个过滤器中进行处理。

<body>
  <div id="app">
    <p>{{ value | filterA | filterB }}</p>
  </div>
  <script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
  <script>
    Vue.filter('filterA',function (value){
      console.log(value + '  filterA');
      return value.split('-').join('');
    })
    Vue.filter('filterB',function (value) {
      console.log(value + '  filterB');
      return value[0].toUpperCase() + value.slice(1);
    })
    new Vue({
      el: '#app',
      data: {
        value: 'a-b-c'
      }
    })
  </script>
</body>

• 一个过滤器可以传入多个参数。

<body>
  <div id="app">
    <!-- 注意：参数1永远是管道符左边的value -->
    <p>{{ value | filterC('TGW—',200)}}</p>
  </div>
  <script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
  <script>
    Vue.filter('filterC', function(par1,par2,par3) {
      console.log(par1,par2,par3);
      return par2 + par1.split('-').join('');
    });
    new Vue({
      el: '#app',
      data: {
        value: 'a-b-c'
      }
    })
  </script>
</body>

五、局部过滤器

• 局部过滤器只能在当前 Vue 实例中使用。其他的Vue实例中无法访问。

<div id="app">
    <p>{{ content | filterA }}</p>
    <p>{{ content2 | filterA }}</p>
    <p>{{ content | filterA | filterB }}</p>
    <p>{{ content | filterA | filterC('TGW—')}}</p>
  </div>
  <!-- <div id="app2">
    <p>{{ content | filterA }}</p>
  </div> -->
  <script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        content: 'a-b-c',
        content2: 'd-e-f'
      },
      filters: {
        filterA: function (value){
          console.log(value);
          return value.split('-').join('')
        },
        filterB: function (value) {
          return value.split('').reverse().join('')
        },
        filterC (value,prefix) {
          return prefix + value;
        }
      }
    })
    // new Vue({
    //   el: '#app2',
    //   data: {
    //     content: 'g-h-i'
    //   }
    // })
  </script>
</body>

六、全局过滤器和局部过滤器重名现象

当我们出现全局过滤器和局部过滤器名字一样时，那么我们再执行的时候，是按照就近原则进行执行的，所以执行的是局部过滤器的代码块。

<body>
  <div id="app">
    <p>{{ content | filterA }}</p>
  </div>
  <script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
  <script>
    Vue.filter('filterA', function (value){
      return value.split('').reverse().join('')
    })
    new Vue({
      el: '#app',
      data: {
        content: 'a-b-c'
      },
      filters: {
        filterA (value) {
          return value.split('-').join('')
        }
      }
    })
  </script>
</body>

总结

本篇文章就到这里了，希望能给您带来帮助，也希望您能够多多关注我们的更多内容！

Vue2.0系列之过滤器的使用

vue2.0已经废弃了过滤器,需要自定义过滤器,用于一些常见的文本格式化. 感觉超级好用!! 过滤器可以用在两个地方:双花括号插值和 v-bind表达式. 过滤器应该被添加在JavaScript表达式的尾部,由管道符指示. 一.注册全局过滤器注意事项: 1.全局方法Vue.filter()注册一个自定义过滤器,必须放在vue实例化前面 2.过滤器函数始终以表达式的值作为第一个参数,带引号的参数视为字符串,而不带引号的参数按表达式计算 3.可以设置两个过滤器参数,前提这两个过滤器处理的不冲突
vue中过滤器的用法

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

前言大家再使用vue做项目时,查询功能当然必不可少,这就得使用vue强大的filter啦.其实vue内置的两个属性filterBy和orderBy已经能满足部分需求了,但是她更大的的魅力在于自定义filter(之后的文章中会分享),正好我最近做的项目中用到了这个.先给大家看下需求吧.如下图,这是一个通讯录页面,当我们在搜索栏中输入关键字时需要展示相应的员工,同时还得去掉A.B这样的字母索引,并且输入的关键字可以是中文也可以是拼音. 该页面引入搜索栏组件search-bar以及联系人组件
关于Vue中过滤器的必懂小知识

目录前言什么是过滤器如何使用过滤器全局过滤器局部过滤器过滤器可以串联总结前言大家好,今天来分享下Vue中的过滤器小知识什么是过滤器 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持). 如何使用过滤器全局过滤器本案例是过滤价格中的￥和元示例￥1999.00元定义一个capitalize方法,传入value值如果value为空返回空字符串否则就叠加字符串"
vue中的过滤器实例代码详解

过滤器 1.过滤器规则 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方: 双花括号插值{{}}和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符号指示:  {{ name | Upper }}  <div v-bind:id="martin | Upper
vue过滤器用法实例分析

本文实例讲述了vue过滤器用法.分享给大家供大家参考,具体如下: 过滤器: vue提供过滤器: capitalize uppercase currency.... <div id="box"> {{msg|currency ￥}} </div> debounce 配合事件,延迟执行 <div id="box"> <input type="text" @keyup="show | debounce
Vue之过滤器详解

<body> <div id="root"> <h2>显示格式化后的时间</h2>  <h2>现在是{{fmtTime}}</h2>  <h2>现在是{{getFmtTime()}}</h2>  <h2>现在是{{time | timeFormate
vue全局过滤器概念及注意事项和基本使用方法

目录一.过滤器的概念 1.自定义一个全局过滤器的格式二.过滤器的调用方法三.过滤器的注意事项四.基本使用方法一.过滤器的概念 Vue.js允许你自定义过滤器,可被用作一些常见的文本格式化,过滤器可以用在两个地方:mustache 插值和 v-bind 表达式 1.自定义一个全局过滤器的格式 Vue.filter('过滤器将来被调用时候的名称',过滤器的处理函数) 二.过滤器的调用方法  <td>{
Vue的过滤器你真了解吗

目录 1.过滤器 1.1对过滤器的理解 1.2全局过滤器: 1.3局部过滤器: 1.4过滤器的案例总结 1. 过滤器案例中使用到时间格式相关API 1.1 对过滤器的理解定义:对要显示的数据进行特定格式化后在显示适用:做一些简单的逻辑处理特点:滤器可以做一些简单操作,并且没有改变原来的数据,产生新的对应的数据 1. 语法 : data | 过滤器不传参数默认将data值传入,并且自动调用函数,函数可接收到value 传参数并不会覆盖掉第一个参数,第一个参数默认是value
Vue.js 的过滤器你了解多少

目录一.过滤器作用二.过滤器的使用方式三.过滤器的分类四.全局过滤器五.局部过滤器六.全局过滤器和局部过滤器重名现象总结一.过滤器作用过滤器用于进行文本内容格式化处理. 二.过滤器的使用方式过滤器可以在插值表达式和 v-bind 中使用. 三.过滤器的分类全局过滤器局部过滤器四.全局过滤器全局过滤器可以在任意Vue实例中使用. 语法书写方式如下: Vue.filter('过滤器名称',function(value) { //逻辑代码 return '处理结果'; })
Vue.js 的过滤器你了解多少

目录一.过滤器作用二.过滤器的使用方式三.过滤器的分类四.全局过滤器五.局部过滤器六.全局过滤器和局部过滤器重名现象总结一.过滤器作用过滤器用于进行文本内容格式化处理. 二.过滤器的使用方式过滤器可以在插值表达式和 v-bind 中使用. 三.过滤器的分类全局过滤器局部过滤器四.全局过滤器全局过滤器可以在任意Vue实例中使用. 语法书写方式如下: Vue.filter('过滤器名称',function(value) { //逻辑代码 return '处理结果'; })
vue.js的computed,filter,get,set的用法及区别详解

1.vue.js的computed方法: 处理复杂逻辑,基于依赖缓存,当依赖发生改变时会重新取值.用methods也可以实现同样的效果,但methods在重新渲染的时候会重新调用执行,在性能上computed优于methods,当不需要缓存时可用methods. 实例1:computed和methods实现翻转字符串 <template> <div> <input v-model="message"> <p>原始字符串: {{ messa
Vue.js每天必学之过滤器与自定义过滤器

基础类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数.过滤器函数以值为参数,返回转换后的值: Vue.filter('reverse', function (value) { return value.split('').reverse().join('') })  <span v-text="message | reverse">&
Vue.js学习之过滤器详解

前言在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器.阅读这这篇文中的前提是你对Vue已经有了基本的语法基础. Vue.Js中的过滤器基础过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/#过滤器 ,过滤器通常会使用管道标志 " | ", 比如: {{ msg | capitalize }} // 'abc' => 'ABC' upper
使用Vue.js中的过滤器实现幂方求值的方法

1.应用场景使用ElementUI实现一个输入框,输入100,下方显示10000. 2.实现源码 (1)主页面 <template> <el-row> <el-tabs v-model="activeName" @tab-click="handlerClick"> <el-tab-pane label="饼图" name="pie2D"> <el-date-picker
vue.js过滤器+ajax实现事件监听及后台php数据交互实例

本文实例讲述了vue.js过滤器+ajax实现事件监听及后台php数据交互.分享给大家供大家参考,具体如下: 在vue.js开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. index.html: <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title> v
Vue.js每天必学之组件与组件间的通信

什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 使用组件注册之前说过,我们可以用 Vue.extend() 创建一个组件构造器: var MyComponent = Vue.extend({ // 选项... }) 要把这个构造器用作组件,需要用 `Vue.compone
详解vue.js组件化开发实践

前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架以及组件化开发方式的流行,决定技术栈采用:vue + es6 + 组件化. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,代码结构可能如下: - lib/components/calendar |- calendar.css |-