转自: 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. 在Ubuntu16.04里面安装Gogland!

    一,安装 把linux版本的Gogland拷贝到Ubuntu16.04里面,随后在想要存放它的地方解压缩,这样就完成了安装! 二,让Gogland可以快速启动 linux版本的Gogland的启动是用 ...

  2. php中ajax实例,用到json

    调用的博客园苏恒锋的文章.先收藏,在学习: http://www.cnblogs.com/in-loading/archive/2012/05/18/2508123.html 程序中两个文件jsonT ...

  3. jmeter结果分析(图形报表和聚合报告)

    采用Jmeter测试工具对web系统作的负载测试,得出的响应报表,数据比较难懂,现作一具体说明.以下是在一次具体负载测试中得出的具体数值,测试线程设置情况为:线程数:200,等待时间(ramp-up) ...

  4. python接口自动化发送get请求 详解(一)

    前言:接口自动化实现自动化脚本比较稳定,主要用到requests模块,后面我会把这个模块单独拉出来写一下. 一.环境安装 1.用pip安装requests模块 >>pip install ...

  5. 苹果隐私条例更新:收集用户电话和 Email 数据

    简评:苹果现在会收集用户的电话和电子邮件,作为用户「信任评级」的一部分,我还是支持的,因为园长被黑产攻击 AppleID,直接刷爆了我的卡!但是在大环境看,隐私已经不存在了. Apple 最近悄悄为 ...

  6. Common xaml controls(补交作业)

    Common xaml controls 常见的xaml控件: 先上一段代码,把他们基本都实现出来: <Grid Name="MyGrid"> <Button N ...

  7. 2016级算法第六次上机-B.ModricWang's FFT : EASY VERSION

    1114 ModricWang's FFT EASY VERSION 思路 利用FFT做大整数乘法,实际上是把大整数变成多项式,然后做多项式乘法. 例如,对于\(1234\),改写成\(f(x)=1* ...

  8. pixi.js v5版本出了。

    历尽千辛万苦,pixi.js v5版本出了. 请关注群 881784250, 会尽块出个微信小游戏版. pixi.js的每个函数,每个类都有测试用例的.出的版本都是很稳定的.

  9. IntelliJ IDEA 18 周岁,吐血推进珍藏已久的必装插件

    IntelliJ IDEA是目前最好最强最智能的Java IDE,前几天,他刚刚年满18岁.  本文,给大家推荐几款我私藏已久的,自己经常使用的,可以提升代码效率的插件. IDEA插件简介 常见的I ...

  10. 【性能测试】脚本开发,最普通的http协议脚本

    放上来做个备份: Action() { double transTime; // 事务消耗时间 lr_start_transaction("营销_01_MSMH0011_查询拥有码列表&qu ...