Vue 2.0的学习笔记:Vue的过滤器
转自: https://www.w3cplus.com/vue/how-to-create-filters-in-vuejs.html
过滤器的介绍
1、在Vue中使用过滤器(Filters)来渲染数据是一种很有趣的方式。
2、首先我们要知道,Vue中的过滤器不能替代Vue中的methods
、computed
或者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的过滤器的更多相关文章
- Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
- Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
一 使用环境: windows 7 64位操作系统 二 IDE:VSCode/PyCharm 三 Vue.js官网: https://cn.vuejs.org/ 四 下载安装引用 方式1:直接 ...
- Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)
五 Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...
- Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)
Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)
- Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)
(五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二 Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...
- Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
(四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
- 从零开始搭建.NET Core 2.0 API(学习笔记一)
从零开始搭建.NET Core 2.0 API(学习笔记一) 一. VS 2017 新建一个项目 选择ASP.NET Core Web应用程序,再选择Web API,选择ASP.NET Core 2. ...
- Vue 2.0 右键菜单组件 Vue Context Menu
Vue 2.0 右键菜单组件 Vue Context Menu https://juejin.im/entry/5976d14751882507db6e839c
- 学习Vue 入门到实战——学习笔记
闲聊: 自从进了现在的公司,小颖就再没怎么接触vue了,最近不太忙,所以想再学习下vue,就看了看vue相关视频,顺便做个笔记嘻嘻. 视频地址:Vue 入门到实战1.Vue 入门到实战2 学习内容: ...
随机推荐
- 在Ubuntu16.04里面安装Gogland!
一,安装 把linux版本的Gogland拷贝到Ubuntu16.04里面,随后在想要存放它的地方解压缩,这样就完成了安装! 二,让Gogland可以快速启动 linux版本的Gogland的启动是用 ...
- php中ajax实例,用到json
调用的博客园苏恒锋的文章.先收藏,在学习: http://www.cnblogs.com/in-loading/archive/2012/05/18/2508123.html 程序中两个文件jsonT ...
- jmeter结果分析(图形报表和聚合报告)
采用Jmeter测试工具对web系统作的负载测试,得出的响应报表,数据比较难懂,现作一具体说明.以下是在一次具体负载测试中得出的具体数值,测试线程设置情况为:线程数:200,等待时间(ramp-up) ...
- python接口自动化发送get请求 详解(一)
前言:接口自动化实现自动化脚本比较稳定,主要用到requests模块,后面我会把这个模块单独拉出来写一下. 一.环境安装 1.用pip安装requests模块 >>pip install ...
- 苹果隐私条例更新:收集用户电话和 Email 数据
简评:苹果现在会收集用户的电话和电子邮件,作为用户「信任评级」的一部分,我还是支持的,因为园长被黑产攻击 AppleID,直接刷爆了我的卡!但是在大环境看,隐私已经不存在了. Apple 最近悄悄为 ...
- Common xaml controls(补交作业)
Common xaml controls 常见的xaml控件: 先上一段代码,把他们基本都实现出来: <Grid Name="MyGrid"> <Button N ...
- 2016级算法第六次上机-B.ModricWang's FFT : EASY VERSION
1114 ModricWang's FFT EASY VERSION 思路 利用FFT做大整数乘法,实际上是把大整数变成多项式,然后做多项式乘法. 例如,对于\(1234\),改写成\(f(x)=1* ...
- pixi.js v5版本出了。
历尽千辛万苦,pixi.js v5版本出了. 请关注群 881784250, 会尽块出个微信小游戏版. pixi.js的每个函数,每个类都有测试用例的.出的版本都是很稳定的.
- IntelliJ IDEA 18 周岁,吐血推进珍藏已久的必装插件
IntelliJ IDEA是目前最好最强最智能的Java IDE,前几天,他刚刚年满18岁.  本文,给大家推荐几款我私藏已久的,自己经常使用的,可以提升代码效率的插件. IDEA插件简介 常见的I ...
- 【性能测试】脚本开发,最普通的http协议脚本
放上来做个备份: Action() { double transTime; // 事务消耗时间 lr_start_transaction("营销_01_MSMH0011_查询拥有码列表&qu ...