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. 技术干货丨卷积神经网络之LeNet-5迁移实践案例

    摘要:LeNet-5是Yann LeCun在1998年设计的用于手写数字识别的卷积神经网络,当年美国大多数银行就是用它来识别支票上面的手写数字的,它是早期卷积神经网络中最有代表性的实验系统之一.可以说 ...

  2. springboot_自动配置原理

    目录 1.1 @SpringBootApplication 2.1 @EnableAutoConfiguration 2.1.1 @AutoConfigurationPackage 2.1.2 @Im ...

  3. 代码静态测试(java)

    工欲善其事,必先利其器 环境 jdk1.8 IntelliJ IDEA 1.静态代码检查 1.1工具 阿里代码规范检测工具 安装教程:阿里代码规范检查工具 1.2规范等级 在 Snoar 中对代码规则 ...

  4. vue基础入门(2.3)

    2.3.样式绑定 2.3.1.绑定class样式 1.绑定单个class <!DOCTYPE html> <html lang="en"> <head ...

  5. mybatis源码配置文件解析之四:解析plugins标签

    在前边的博客在分析了mybatis解析typeAliases标签,<mybatis源码配置文件解析之三:解析typeAliases标签>.下面来看解析plugins标签的过程. 一.概述 ...

  6. 怎样用 I/O流读取txt文件?

    java.io包提供了用来永久保存对象状态的机制,可处理各种类型的流,如文件流.字节流.字符流等,还提供实现可串行化Serializable接口.可处理对象流. Java语言提供3种自动生成的标准流. ...

  7. 看完这篇 HashSet,跟面试官扯皮没问题了

    我是风筝,公众号「古时的风筝」,一个兼具深度与广度的程序员鼓励师,一个本打算写诗却写起了代码的田园码农! 文章会收录在 JavaNewBee 中,更有 Java 后端知识图谱,从小白到大牛要走的路都在 ...

  8. 洛谷 P1025 【数的划分】

    进入正题 思路:递归 这道题有点像放苹果: 把M个同样的苹果放在N个同样的盘子里,允许有的盘子空着不放,问共有多少种不同的分发(5,1,1和1,1,5是同一种方法) 转化一下就有: 把n个苹果放在k个 ...

  9. 工作那么久,才知道的 SOLID 设计原则

    认识 SOLID 原则 无论是软件系统设计,还是代码实现,遵循有效和明确的设计原则,都利于系统软件灵活可靠,安全快速的落地,更重要的是能灵活地应对需求,简化系统扩展和维护,避免无效的加班.本文主要讨论 ...

  10. unity Prefab 序列化一个小问题。

    情景: unity之前编辑过一个字段 A, 可以再unity编辑器编辑, 之后不用了. 后来有另外的功能, 起了同样的变量名,发现有默认值. 原因: 是因为序列化的时候把A字段存储到了prefab里面 ...