Vue中,过滤器的使用方法!
Vue.js允许自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部,由“管道”符号指示;(借官方的来介绍下,接下来直奔主题)
1、定义全局过滤器!任何组件都能用。
main.js中定义全局过滤器
// 定义长度为10的过滤器
Vue.filter('length10',(e) =>{
return e.slice(0,10) + '...'
})
// 定义转大小写的过滤器
Vue.filter('toUpperCase',(e)=>{
return e.toUpperCase()
})
app.vue使用
// template
<div>{{str}}</div>
<div>{{str | length10}}</div>
<div>{{str1 | length10 | toUpperCase}}</div> // script
data(){
return {
str:'公众号“前端伪大叔”,欢迎大家前来关注!',
str1:'qianduanweidashu'
}
}
总结:过滤器使用方法是‘|’直接使用,可以使用多个过滤器
2、过滤器传参,了解一下 /笑哭
main.js
Vue.filter('Biography',(e,str1) =>{
return e.slice(0,str1) + '...'
}
App.vue
// template
<div>{{str | Biography(9)}}</div>
// script
data(){
return {
str:'公众号“前端伪大叔”,欢迎大家前来关注!',
}
}
3、组件内过滤器
组件内过滤器,需要定义在filtets这个对象中,对象中定义的都是方法;
// template
<div>{{str | length(9) }}</div>
<div>{{str1 | length(9) | toUpperCase}}</div> // script
data() {
return {
str: "公众号“前端伪大叔”,欢迎大家前来关注!",
str1:'qianduanweidashu'
};
},
// 这里filters是这个对象
filters: {
// 自行输入长度
length(e, num) {
return e.slice(0, num) + "...";
},
// 转为大写
toUpperCase(e) {
return e.toUpperCase();
}
}
总结:filters是局部过滤器,只能在组件内使用;和全局过滤器一样可以传参,使用同时多个过滤器;
如果大家喜欢的话,欢迎关注“前端伪大叔”我将为您不间断的分享前端学习知识!
Vue中,过滤器的使用方法!的更多相关文章
- vue中添加util公共方法&&ES6之import、export
vue中添加util公共方法&&ES6之import.export https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Re ...
- vue中mixins的使用方法和注意点(详)
mixins基础概况 vue中的解释是这样的,如果觉得语言枯燥的可以自行跳过嘿~ 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使 ...
- vue中 localStorage的使用方法(详解)
vue中实现本地储存的方法:localStorage,在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cooki ...
- Vue中导出Excel表格方法
本文记录一下在Vue中实现导出Excel表格的做法.参考度娘上各篇博客,最后实现功能 Excel表格,我的后端返回的是数据流,然后文件名是放进了content-disposition中,前端进行获取. ...
- vue中计算属性computed方法内传参
vue中computed计算属性无法直接进行传参 如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)实现 例如: 在上篇博客vue安装使用最后的成绩表练习中的过滤功能的实现: &l ...
- vue中过滤器比较两个数组取相同值
在vue中需要比较两个数组取相同值 一个大数组一个 小数组,小数组是大数组的一部分取相同ID的不同name值 有两种写法,两个for循环和map写法 const toName = (ids, arr) ...
- 第七十六篇:ref引用(在vue中引用Dom的方法)
好家伙, 引子: jQuery简化了程序员操作DOM的过程 vue 优势:MVVM 在vue中,程序员不需要操作DOM.程序员只需要把数据维护好即可!(数据驱动视图) 那么若要在vue中操作dom,这 ...
- 在Vue中关闭Eslint 的方法
在vue项目中关闭ESLint方法:找到 webpack.base.conf.js 将这些代码注释掉, { test: /\.(js|vue)$/, loader: 'eslint-loader', ...
- vue中引入awesomeswiper的方法以及编写轮播组件
1.先安装less-loader npm install less less-loader --save 2.再安装css-loader npm install css-loader --save 3 ...
- vue中Prop父子传值方法
在用vue做项目的过程中感觉很好玩,特做下笔记... 父组件中: <template> <div> <fpdx-modal :zbArr="polygonArr ...
随机推荐
- 只需体验三分钟,你就会跟我一样,爱上这款Toast
只需体验三分钟,你就会跟我一样,爱上这款Toast https://www.jianshu.com/p/9b174ee2c571
- PHP安装 (结合之前的nginx安装与mysql安装组合为lnmp)
检查安装PHP所需的lib库 yum -y install zlib-devel libxml2-devel libjpeg-devel libjpeg-turbo-devel libiconv-de ...
- GitHub:Alibaba
ylbtech-GitHub:Alibaba 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 1. https://github.com/alibaba 2. ...
- [Python]python-jenkins获取正在构建中的job
需求: 我现在需要完成1个接口,这个接口会启动jenkins构建jobA, jobA构建结束, 返回job的构建结果 思路: 首先使用get_job_info获取最后1次构建的构建序号,然后再通过ge ...
- 2.oracle数据库:[1]oracle简易客户端安装方法
准备oracle简易客户端程序,如果没有请到oracle网站下载www.oracle.com,可以下载基本包及其他扩展程序包,例如:如果要使用sqlplus则需要下载sqlplus包,笔者下载了i ...
- redis(3)主从与集群
一.主从架构 yum安装的redis cd /etc/ cp redis.conf /etc/slave.conf vim slave.conf bind 192.168.42.7 slaveof p ...
- 2019.11.18【每天学点SAP小知识】Day4 - ABAP 7.40新语法 FOR
"今天学习一下FOR的语法,常用的2个语法. FOR wa|<fs> IN itab [INDEX INTO idx] [cond] "FOR i = … [THEN ...
- markdown基础使用
标题 # 这是一级标题 ## 这是二级标题 ### 这是三级标题 #### 这是四级标题 ##### 这是五级标题 ###### 这是六级标题 实际效果 字体 **加粗字体** *斜体* ...
- 2019 1月 第三次java基础有感
毕业半年了,一直在游戏公司做游戏服务器开发,java语言. 工作中,写着写着代码,接触java多了,有时候就会发现自己的java基础会不够用.以前实习的时候也体会到一次,然后过了一遍基础.现在正式工作 ...
- windows客户端如果通过cmd窗口连接到远程linux服务器,可以使用telnet;
linux系统打开telnet端口的方法 2016-03-11 16:02:25 标签:linux telnet 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明. ...