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学习(十五) 过滤器简单实用的更多相关文章

  1. day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等

    Vue学习四之过滤器.钩子函数.路由.全家桶等   本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...

  2. javaweb学习总结(二十五)——jsp简单标签开发(一)

    一.简单标签(SimpleTag) 由于传统标签使用三个标签接口来完成不同的功能,显得过于繁琐,不利于标签技术的推广, SUN公司为降低标签技术的学习难度,在JSP 2.0中定义了一个更为简单.便于编 ...

  3. 强化学习(十五) A3C

    在强化学习(十四) Actor-Critic中,我们讨论了Actor-Critic的算法流程,但是由于普通的Actor-Critic算法难以收敛,需要一些其他的优化.而Asynchronous Adv ...

  4. vue第十五单元(熟练使用vue-router插件)

    第十五单元(熟练使用vue-router插件) #课程目标 1.掌握路由嵌套 2.掌握导航守卫 #知识点 #一.路由嵌套 很多时候,我们会在一个视口中实现局部页面的切换.这时候就需要到了嵌套路由. 也 ...

  5. vue学习(十六) 自定义私有过滤器 ES6字符串新方法 填充字符串

    <div id="app"> <p>{{data | formatStr('yyyy-MM-dd')}}</p></div> //s ...

  6. vue学习笔记(五):对于vuex的理解 + 简单实例

    优点:通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护.使用vuex来引入外部状态管理,将业务逻辑切分到组件外,可以避免重复的从服务端抓取数据. 详情请参考官 ...

  7. day 84 Vue学习四之过滤器、钩子函数、路由、全家桶等

      本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤器 1 moment.js 在这里我们先介绍一个 ...

  8. Vue学习笔记(五)——配置开发环境及初建项目

    前言 在上一篇中,我们通过初步的认识,简单了解 Vue 生命周期的八个阶段,以及可以应用在之后的开发中,针对不同的阶段的钩子采取不同的操作,更好的实现我们的业务代码,处理更加复杂的业务逻辑. 而在这一 ...

  9. vue学习笔记(五)条件渲染和列表渲染

    前言 在众多的编程语言中,我们的基础语法总是少不了一些专业语法,比如像定义变量,条件语句,for循环,数组,函数等等,vue.js这个优秀的前端框架中也有同样的语法,我们换一个名词,将条件语句改成专业 ...

随机推荐

  1. Python-argparse模块-获取命令行参数

    #!/usr/bin/python3 """ Author : Jet Bi License : www.cyeap.com Summary : 获取命令行的参数 Not ...

  2. Mongodb 批量更新

    >db.col.update({查询条件},{修改条件},{multi:true})

  3. Python 简明教程 --- 5,Python 表达式与运算符

    微信公众号:码农充电站pro 个人主页:https://codeshellme.github.io 靠代码行数来衡量开发进度,就像是凭重量来衡量飞机制造的进度. -- Bill Gates 目录 1, ...

  4. Eclipse配置maven环境1

    一.什么是maven? Maven是一个项目管理工具,它包含了一个项目对象模型 (Project Object Model),一组标准集合,一个项目生命周期(Project Lifecycle),一个 ...

  5. nginx 注释配置及详解

    前言 DMZ(Demilitarized Zone) 非军事区,生产环境 WEB 服务部署的区域,公司的架构为一台nginx 充当 load balance 服务,负载到两台 nginx 上面,反向代 ...

  6. Elasticsearch从入门到放弃:分词器初印象

    Elasticsearch 系列回来了,先给因为这个系列关注我的同学说声抱歉,拖了这么久才回来,这个系列虽然叫「Elasticsearch 从入门到放弃」,但只有三篇就放弃还是有点过分的,所以还是回来 ...

  7. 超简洁!利用easyExcel导出,读入Excel

          x           深夜,在东莞,7天酒店,打开电脑,访问国内最大的同性交友网站.     日常开发中,导出导入场景非常多,尤其是对于后台管理更是一个列表一个导出,如果从导出的业务中抽 ...

  8. (私人收藏)SQLite 全面手册以及教程

    SQLite 全面手册以及教程 https://pan.baidu.com/s/1VKzCWjF79fAiOLjAlx-3zwnfkp SQLite 全面手册以及教程 SQLite 简介 SQLite ...

  9. (私人收藏)2019科协WER解决方案

    2019科协WER解决方案 含地图,解决程序,详细规则,搭建方案EV3;乐高;机器人比赛;能力风暴;WER https://pan.baidu.com/s/16sdFmM49bPijYw55i8ox1 ...

  10. 学习 Java 网站推荐给你

    推荐几个非常不错的 Java 学习网站 LearnJava 在线 这是一个非常不错的学习 Java 的在线网站,纯免费.这是一个个人项目,旨在通过简单有效的在浏览器中进行练习让你快速掌握 Java 编 ...