vue学习(十五) 过滤器简单实用
vue过滤器:
概念:vue.js允许你自定义过滤器可被用作一些常见文本的格式化。过滤器可以用在两个地方:插值表达式 v-bind表达式 由管道符指示
//过滤器调用时候的格式
{{ name | 处理的函数名 }}
//可以通过Vue.filter来自定义过滤器 data就是管道符" | " 前面的内容,也就是name
Vue.filter('过滤器名称',function(data){
return data+'hahahaha'
})
//该过滤器就是为插值表达式的name自动加上hahahaha 最终在页面上显示 的是name的值hahahaha
//html 需求:使用过滤器把单纯替换为天真
<div id="app">
<p>{{msg | msgdeal}}</p>//管道符前面的值会传递给过滤器参数
<p>{{msg | msgdealAuto('疯狂','11222333')}}</p>//将某些目标替换为 疯狂 管道符会被传递到过滤器第一个参数,过滤器参数会被传递到第二个参数 <p>{{msg | msgdeal | test}}</p>//可以连续调用多个过滤器,msg先被msgdeal处理后 再接着被test过滤器处理 最后插值表达式的值是 曾经某人也是一个天真=====的少年,天真=====的认为~~~
</div> //script
<script>
//定义一个全局的过滤器 名字叫做 msgdeal
Vue.filter('msgdeal',function(msg){
return msg.replace('单纯','天真') //这样写 只会替换第一个
//replace()的第一个参数不仅可以写字符串,还可以定义一个正则表达式
return msg.replace(/单纯/g,'邪恶') //正则表达式 g全局匹配
})
Vue.filter('msgdealAuto',function(msg,arg,arg2){
return msg.replace(/单纯/g, arg+arg2)
})
Vue.filter('test',function(msg){
return msg+'====='
})
var vm = new Vue({
el:'app',
data:{
msg:'曾经某人也是一个单纯的少年,单纯的认为~~~'
}
})
</script>
vue学习(十五) 过滤器简单实用的更多相关文章
- day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等
Vue学习四之过滤器.钩子函数.路由.全家桶等 本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...
- javaweb学习总结(二十五)——jsp简单标签开发(一)
一.简单标签(SimpleTag) 由于传统标签使用三个标签接口来完成不同的功能,显得过于繁琐,不利于标签技术的推广, SUN公司为降低标签技术的学习难度,在JSP 2.0中定义了一个更为简单.便于编 ...
- 强化学习(十五) A3C
在强化学习(十四) Actor-Critic中,我们讨论了Actor-Critic的算法流程,但是由于普通的Actor-Critic算法难以收敛,需要一些其他的优化.而Asynchronous Adv ...
- vue第十五单元(熟练使用vue-router插件)
第十五单元(熟练使用vue-router插件) #课程目标 1.掌握路由嵌套 2.掌握导航守卫 #知识点 #一.路由嵌套 很多时候,我们会在一个视口中实现局部页面的切换.这时候就需要到了嵌套路由. 也 ...
- vue学习(十六) 自定义私有过滤器 ES6字符串新方法 填充字符串
<div id="app"> <p>{{data | formatStr('yyyy-MM-dd')}}</p></div> //s ...
- vue学习笔记(五):对于vuex的理解 + 简单实例
优点:通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护.使用vuex来引入外部状态管理,将业务逻辑切分到组件外,可以避免重复的从服务端抓取数据. 详情请参考官 ...
- day 84 Vue学习四之过滤器、钩子函数、路由、全家桶等
本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤器 1 moment.js 在这里我们先介绍一个 ...
- Vue学习笔记(五)——配置开发环境及初建项目
前言 在上一篇中,我们通过初步的认识,简单了解 Vue 生命周期的八个阶段,以及可以应用在之后的开发中,针对不同的阶段的钩子采取不同的操作,更好的实现我们的业务代码,处理更加复杂的业务逻辑. 而在这一 ...
- vue学习笔记(五)条件渲染和列表渲染
前言 在众多的编程语言中,我们的基础语法总是少不了一些专业语法,比如像定义变量,条件语句,for循环,数组,函数等等,vue.js这个优秀的前端框架中也有同样的语法,我们换一个名词,将条件语句改成专业 ...
随机推荐
- Python-argparse模块-获取命令行参数
#!/usr/bin/python3 """ Author : Jet Bi License : www.cyeap.com Summary : 获取命令行的参数 Not ...
- Mongodb 批量更新
>db.col.update({查询条件},{修改条件},{multi:true})
- Python 简明教程 --- 5,Python 表达式与运算符
微信公众号:码农充电站pro 个人主页:https://codeshellme.github.io 靠代码行数来衡量开发进度,就像是凭重量来衡量飞机制造的进度. -- Bill Gates 目录 1, ...
- Eclipse配置maven环境1
一.什么是maven? Maven是一个项目管理工具,它包含了一个项目对象模型 (Project Object Model),一组标准集合,一个项目生命周期(Project Lifecycle),一个 ...
- nginx 注释配置及详解
前言 DMZ(Demilitarized Zone) 非军事区,生产环境 WEB 服务部署的区域,公司的架构为一台nginx 充当 load balance 服务,负载到两台 nginx 上面,反向代 ...
- Elasticsearch从入门到放弃:分词器初印象
Elasticsearch 系列回来了,先给因为这个系列关注我的同学说声抱歉,拖了这么久才回来,这个系列虽然叫「Elasticsearch 从入门到放弃」,但只有三篇就放弃还是有点过分的,所以还是回来 ...
- 超简洁!利用easyExcel导出,读入Excel
x 深夜,在东莞,7天酒店,打开电脑,访问国内最大的同性交友网站. 日常开发中,导出导入场景非常多,尤其是对于后台管理更是一个列表一个导出,如果从导出的业务中抽 ...
- (私人收藏)SQLite 全面手册以及教程
SQLite 全面手册以及教程 https://pan.baidu.com/s/1VKzCWjF79fAiOLjAlx-3zwnfkp SQLite 全面手册以及教程 SQLite 简介 SQLite ...
- (私人收藏)2019科协WER解决方案
2019科协WER解决方案 含地图,解决程序,详细规则,搭建方案EV3;乐高;机器人比赛;能力风暴;WER https://pan.baidu.com/s/16sdFmM49bPijYw55i8ox1 ...
- 学习 Java 网站推荐给你
推荐几个非常不错的 Java 学习网站 LearnJava 在线 这是一个非常不错的学习 Java 的在线网站,纯免费.这是一个个人项目,旨在通过简单有效的在浏览器中进行练习让你快速掌握 Java 编 ...