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>

转载于:https://www.cnblogs.com/xuchao0506/p/10849831.html

vue学习(十五) 过滤器简单实用相关推荐

PyTorch框架学习十五——可视化工具TensorBoard
PyTorch框架学习十五--可视化工具TensorBoard 一.TensorBoard简介二.TensorBoard安装及测试三.TensorBoard的使用 1.add_scalar() 2 ...
C++学习十五、类继承（1）基类，派生类，访问权限，protected
C++学习十五.类继承(1)基类,派生类前言类继承类的关系与继承基类, 派生类基类派生类构造函数,析构函数文件位置访问权限 protected 后记前言本篇开始学习C++类的继 ...
OpenGL入门学习(十五)
OpenGL入门学习[十五] 这次讲的所有内容都装在一个立方体中,呵呵. 呵呵,绘制一个立方体,简单呀,我们学了第一课第二课,早就会了. 先别着急,立方体是很简单,但是这里只是拿立方体做一个例子,来说 ...
Vue学习第五天（路由相关）
Vue学习第五天(路由相关) 今天主要学习了vue中ref关键字和路由相关的知识点对于ref,可以理解为引用,当我们在一个传统的html标签上使用这个标签以后 <login ref=" ...
Vue 学习第五天学习笔记
Vue 学习第五天 1. keyup事件 <div id="app"> <input type="text" v-model=" ...
OpenCV与图像处理学习十五——LBP纹理特征（含代码）
OpenCV与图像处理学习十五--LBP纹理特征(含代码) 一.LBP介绍二.LBP原理三.代码应用一.LBP介绍 LBP(Local Binary Pattern, 局部二值模式) , 是一种 ...
好程序员教程分析Vue学习笔记五
好程序员教程分析Vue学习笔记五,上次我们学习了Vue的组件,这次我们来学习一下路由的使用.在Vue中,所谓的路由其实跟其他的框架中的路由的概念差不多,即指跳转的路径. 注意:在Vue中,要使用路由, ...
Linux学习十五 DNS基础服务
Linux学习十五 DNS基础服务 DNS服务基础 BIND 伯利克Internet 域名服务主要执行程序:/usr/sbin/named 系统服务:named 默认端口: TCP/UDP 53 主 ...
javaweb学习总结(二十五)——jsp简单标签开发(一)
一.简单标签(SimpleTag) 由于传统标签使用三个标签接口来完成不同的功能,显得过于繁琐,不利于标签技术的推广, SUN公司为降低标签技术的学习难度,在JSP 2.0中定义了一个更为简单.便于编 ...

vue学习(十五) 过滤器简单实用

vue学习(十五) 过滤器简单实用相关推荐

最新文章

热门文章