转自: https://www.w3cplus.com/vue/how-to-create-filters-in-vuejs.html

过滤器的介绍

1、在Vue中使用过滤器(Filters)来渲染数据是一种很有趣的方式。

2、首先我们要知道,Vue中的过滤器不能替代Vue中的methodscomputed或者watch

3、过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本。

4、在很多不同的情况下,过滤器都是有用的,比如尽可能保持API响应的干净,并在前端处理数据的格式。

5、在你希望避免重复和连接的情况下,它们也可以有效地封装成可重用代码块背后的所有逻辑。

6、在Vue 2.0中已经没有内置的过滤器了,我们可以自定义过滤器。2.0之前有。在这里有一个旧的内置过滤器的完整列表

定义和使用过滤器

1.全局和本地过滤器:你可以跨所有组件访问全局过滤器,而本地过滤器只允许你在其定义的组件内部使用

全局过滤器

全局过滤器

来看一个简单的示例。下面这个示例演示的是注册一个全局过滤器,其作用就是在价格前面加上美元符号:

// 声明一个全局的过滤器 
Vue.filter('toUSD', function (value) {
  return `$${value}`
})
// 在模板中这样使用 文本插值的使用方式
<div id="app">
<h1>{{ price | toUSD}}</h1>
</div>

  注意:过滤器定义必须始终位于Vue实例之上,否则你将会得到一个“Failed to resolve filter: toUSD”的错误信息。

本过过滤器

本地过滤器被注册到一个Vue组件中。下面这个示例展示了本地过滤器是如何创建的。这个过滤器的功能是将字母变成大写:

本地过滤器存储在Vue组件中,作过filters属性中的函数。这个时候你想注册多少个就能注册多少个:

let app = new Vue({
  el: '#app',
  data () {
    return {
    name: 'w3cplus.com'
    }
  },
  // 声明一个本地的过滤器
  filters: {
    Upper: function (value) {
      return value.toUpperCase()
    },
Lower: function (value) { 
      return value.toLowerCase()
    }
  }
})
<div id="app"> <h1>{{ name | Upper }}</h1> </div>

 

添加参数

正如前面提到过的,过滤器可以根据你需要添加一些参数进来。我们来看一个示例。比如说,我们创建博客的时候,都会有文章列表,每篇博客将会有一个文章摘要,然后提供一个“阅读更多”的功能。我们这个示例就是来创建一个名为readMore的过滤器,它将把字符串的长度限制为给定的字符数,并将其附加到你的选择的后缀中。Vue将被过滤的值作为第一个文本和长度,后缀作为第二个和第三个参数。示例代码看起来像这样:

// 声明一个全局的过滤器readMore
// 这个过滤器传了三个参数:text:文本内容, length:截取长度, suffix :后缀
Vue.filter('readMore', function (text, length, suffix) {
  return text.substring(0, length) + suffix
})
let app = new Vue({
  el: '#app',
  data () {
    return {
      articles: [
        {
        title: 'CSS :focus-within',
        summary: 'CSS的世界真是一个神奇的世界。可能众多前端开发者听说过:focus并未听说过:focus-within。那么:focus-within是什么鬼。'
        link: '//www.w3cplus.com/css/focus-within.html'
        },
       {
        title: '如何改变表单控件光标颜色',
       summary: '表单大家应该不陌生,当然了,今天并不是来聊怎么做表单或者处理表单的样式网格。而是来聊聊怎么改变表单控件中光标的颜色。不知道在大家心中,表单控件的光标颜色是根据color属性来控制的。',
       link: '//www.w3cplus.com/css/caret-color.html'
     }
     ]
    }
  }
})
<div id="app">
  <ul>
    <li v-for="article in articles">
    <h2>
      <a :href="article.link">{{ article.title }}</a>
    </h2>
    <div class="summary">
      {{ article.summary | readMore(100, '...') }}
    </div>
    <div class="action">
      <a :href="article.link">阅读更多</a>
    </div>
  </li>
  </ul>
</div>

 

过滤器串连

关于过滤器,我最喜欢的一件事是能够使用管道(|)符号对它们进行串连,并通过一系列过滤器转换一个值。让我们再看一个价格的例子,并让这个价格只保留两位小数,然后加上美元符号。

虽然我们可以使用一个单独的过滤器来实现它,但我们也可能想要使用toUSD过滤器。在这种情况下,分离和串连过滤器是一处方法:

Vue.filter('toFixed', function (price, limit) {
return price.toFixed(limit)
})
Vue.filter('toUSD', function (price){
return `$${price}`
})
let app = new Vue({
el: '#app',
data () {
return {
price: 435.333
}
}
})
<div id="app">
<h1>
{{ price | toFixed(2) | toUSD }}
</h1>
</div>

  他的功能仅仅不像文章中的这么简单,他可以做任何你想做的事情。如果你对Vue其他的自定义过滤器功能感兴趣的话,可以阅读@wy-ei在Github上创建的Vue过滤器集合

Vue 2.0的学习笔记:Vue的过滤器的更多相关文章

  1. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  2. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  3. Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)

    五  Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...

  4. Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)

    Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)

  5. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  6. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  7. 从零开始搭建.NET Core 2.0 API(学习笔记一)

    从零开始搭建.NET Core 2.0 API(学习笔记一) 一. VS 2017 新建一个项目 选择ASP.NET Core Web应用程序,再选择Web API,选择ASP.NET Core 2. ...

  8. Vue 2.0 右键菜单组件 Vue Context Menu

    Vue 2.0 右键菜单组件 Vue Context Menu https://juejin.im/entry/5976d14751882507db6e839c

  9. 学习Vue 入门到实战——学习笔记

    闲聊: 自从进了现在的公司,小颖就再没怎么接触vue了,最近不太忙,所以想再学习下vue,就看了看vue相关视频,顺便做个笔记嘻嘻. 视频地址:Vue 入门到实战1.Vue 入门到实战2 学习内容: ...

随机推荐

  1. 修改 Cloud image 的密码的简单方法

    下载工具: yum -y install libguestfs-tools.noarch   打开DEBUG: export LIBGUESTFS_DEBUG=1 LIBGUESTFS_TRACE=1 ...

  2. django系列8.3--django中间件实现登录验证(1)

    中间件版的登录验证需要依靠session,所以数据库中要有django_session表. urls.py from django.conf.urls import url from app01 im ...

  3. npm安装包很慢

    每次安装时: 可以通过指定 --registry,指向国内镜像服务器地址来加快安装速度. npm install -gd express --registry=http://registry.npm. ...

  4. Oracle执行SQL语句的过程

    转载至:http://blog.csdn.net/aqszhuaihuai/article/details/7024551 当我们提交一条sql语句时,Oracle会做哪些操作呢? Oracle会为每 ...

  5. 人工鱼群算法超详细解析附带JAVA代码

    01 前言 本着学习的心态,还是想把这个算法写一写,给大家科普一下的吧. 02 人工鱼群算法 2.1 定义 人工鱼群算法为山东大学副教授李晓磊2002年从鱼找寻食物的现象中表现的种种移动寻觅特点中得到 ...

  6. Python标准库中的生成器函数

    一.用于过滤的生成器函数 - 从输入的可迭代对象中产出元素的子集,而不修改元素本身 import itertools l1 = [1,2,3,4,5] l2 = [True,False,True,Fa ...

  7. JavaIO系统

    为了方便记忆,特将IO中涉及的类进行整理如下: 1.File类 提供了目录操作,查看文件属性等. 2.java IO类层次 面向字节流的类为InputStream.OutputStream:面向字符流 ...

  8. 编程开发之--java多线程学习总结(3)类锁

    2.使用方法同步 package com.lfy.ThreadsSynchronize; /** * 1.使用同步方法 * 语法:即用 synchronized 关键字修饰方法(注意是在1个对象中用锁 ...

  9. Ubuntu16.04安装视觉SLAM环境(DBow3)

    1.从Github上现在DBow3词袋模型库 git clone https://github.com/rmsalinas/DBow3.git 2.开始安装DBow3库,进入DBow3目录 mkdir ...

  10. 【VS2015】关于VS2015如何运行的问题

    各位看官,lt's been a long time since we met last time. 是否习惯了CodeBlocks那种简易编写C文件?一到写工程就懵逼的状态?今天我给他们带来如何让C ...