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 学习内容: ...
随机推荐
- Mybatis 优化:
Mybatis 的优化: ** 第一个 对于数据库配置的优化: 创建一个 DB.properties 的文件 里面编写Key = value 形式的数据库信息 比如: driver = com.mys ...
- 配置CKFinder(Java版)
1. 下载 CKFinder官网下载地址提供了PHP,ASP, Java等不同下载版本. 2. 配置 1)config.xml放到WEB-INF下, 2)其他文件放到Webcontent下, 3) ...
- 工具IDEA 配置springboot+maven项目
工具IDEA 配置springboot+maven项目 首先安装IDEA,至于怎么安装就不介绍了.. 第一步 配置maven环境 首先安装maven,先在网上下载一个maven包.在IDEA的sett ...
- (一)Python装饰器的通俗理解
在学习Python的过程中,我相信有很多人和我一样,对Python的装饰器一直觉得很困惑,我也是困惑了好久,并通过思考和查阅才能略有领悟,我希望以下的内容会对你有帮助,我也努力通过通俗的方式使得对Py ...
- day05 --class --home
# -*- coding: utf-8 -*-# @Time : 2018/12/25 14:24# @Author : Endless-cloud# @Site : # @File : day05 ...
- OKR 第一阶段
性能优化,主要是为了提高用户体验. 1. 根据浏览器的工作原理,dom树解析时,遇到css 以及js 会出现阻塞,为了缩短dom树解析时间,进行了js 增加 async 的异步加载过程 . 原有代 ...
- 启动多个appium服务(同时运行多台设备)
准备: 一台真机一台模拟器(使用的是“夜神模拟器”) 先查看是否检测到设备 adb devices 由上图可看出没有检测到模拟器(夜神模拟器已开启) 可通过以下配置完成: 第一步:找到adb的 ...
- 洛谷P2051 [AHOI2009]中国象棋(dp)
题面 luogu 题解 \(50pts:\)显然是\(3\)进制状压\(dp\) \(100pts:\) 一行一行地考虑 \(f[i][j][k]\)表示前\(i\)行,有\(j\)列放了一个,有\( ...
- Vue局部注册 或者全局注册 组件时,组件定义要用 分隔命名,用驼峰命名是不生效的
Vue.component('all-canuse',{ props:['message'], template:'<div>{{message}}</div>' }) 像这样
- Vue项目开发目录结构
最近做一些CI+Vue开发的简单项目,由于刚开始一直从事后端,对Vue了解不是很多,fork了团队的项目代码发现项目的文件夹很多,一时间有些懵,上网上参考了部分资料,博客园中的放晴的天空与狮子爱吃草两 ...