学习vue第七节，filter过滤器如何的使用
vue 过滤器如何的使用
1.全局过滤器
2.私有过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 1.过滤选择器基本使用,调用方法，默认传参msg {{name | 过滤选择器名称}} -->
<p>{{msg | msgFormat1}}</p>
<!-- 过滤选择器 可以传自己的参数-->
<p>{{msg | msgFormat2("b")}}</p>
<!-- 过滤选择器 可以多次调用-->
<p>{{msg | msgFormat2("b") | other}}</p>
</div>
<script type="text/javascript">
// 全局过滤选择器 ，msg 默认传过来的参数
Vue.filter("msgFormat1",function(msg){
return msg+"aa"
})
Vue.filter("msgFormat2",function(msg,b){
// 可以加正则表达式 /2/g 全局匹配
return msg.replace(/2/g,"a"+b)
})
Vue.filter("other",function(msg){
// 调用完msgFormat2 再调用other
return msg+" over"
}) var vm=new Vue({
el:"#app",
data:{
msg:"123412341234"
},
methods:{ },
filters:{//定义 私有过滤器
msgFormat1:function(msg){//同样的过滤器msgFormat1 优先调用私有过滤器
return `${msg}bb`;//ES6字符串连接方法
}
}
}) </script>
</body>
</html>
学习vue第七节，filter过滤器如何的使用的更多相关文章
- javaweb学习总结(四十二)——Filter(过滤器)学习
一.Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态 ...
- javaWeb学习总结（10）- Filter(过滤器)学习
一.Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有 web资源:例如Jsp, Servlet, 静 ...
- javaweb学习总结(四十六)——Filter(过滤器)常见应用
一.统一全站字符编码 通过配置参数charset指明使用何种字符编码,以处理Html Form请求参数的中文问题 1 package me.gacl.web.filter; 2 3 import ja ...
- javaWeb学习总结（10）- Filter(过滤器)常见应用(3)
一.统一全站字符编码 通过配置参数charset指明使用何种字符编码,以处理Html Form请求参数的中文问题 package me.gacl.web.filter; import java.io. ...
- javaWeb学习总结（10）- Filter(过滤器)学习（2）
在filter中可以得到代表用户请求和响应的request.response对象,因此在编程中可以使用Decorator(装饰器)模式对request.response对象进行包装,再把包装对象传给目 ...
- JavaWeb学习（二十三）———Filter(过滤器)
一.Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态 ...
- shiro框架学习-6-Shiro内置的Filter过滤器及数据加解密
1. shiro的核心过滤器定义在枚举类DefaultFilter 中,一共有11个 ,配置哪个路径对应哪个拦截器进行处理 // // Source code recreated from a .c ...
- Java Web学习总结（12）Filter过滤器
一,Filter简介 Filter也称之为过滤器,Filter是对客户端访问资源的过滤,符合条件放行,不符合条件不放行,并且可以对目标资源访问前后进行逻辑处理. 二,Filter开发步骤 1)编写一个 ...
- 学习vue第六节，v-if和v-show
vue 中的v-if和v-show <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
随机推荐
- python3（二十三）classInstance
""" 类和实例和访问权限 """ __author__ = 'shaozhiqi' # class后面紧接着是类名,即Student,类名 ...
- Blazor WebAssembly 3.2.0 Preview 4 如期发布
ASP.NET团队如期3.16在官方博客发布了 Blazor WebAssembly 3.2.0 Preview 4:https://devblogs.microsoft.com/aspnet/bla ...
- 广告行业中那些趣事系列9：一网打尽Youtube深度学习推荐系统
最新最全的文章请关注我的微信公众号:数据拾光者. 摘要:本篇主要分析Youtube深度学习推荐系统,借鉴模型框架以及工程中优秀的解决方案从而应用于实际项目.首先讲了下用户.广告主和抖音这一类视频平台三 ...
- 一个java 码手 的老牛 --- 涉及 一些不错的java 基础课程
http://www.zuidaima. com/user/1550463811307520/share/collect.htm
- 动手学Transformer
动手实现Transformer,所有代码基于tensorflow2.0,配合illustrated-transformer更香. 模型架构 Encoder+Decoder Encoder Decode ...
- 20200107——记spring的DataSource
spring项目中总要跟数据库打交道,其中怎么连接数据库的方法都有很多,大概分为3类: 1) 通过JNDI获取应用服务器(如JBOSS, Tomcat) 的数据源 2) Spring容器中直接配置数 ...
- 【转】动态规划之最长公共子序列（LCS）
[原文链接]最长公共子序列(Longest Common Subsequence,简称 LCS)是一道非常经典的面试题目,因为它的解法是典型的二维动态规划,大部分比较困难的字符串问题都和这个问题一个套 ...
- （一）微信小程序：实现引导页
基本目录结构 index目录下文件操作步骤 1.针对index.wxml <!--index.wxml--> <view class="index-container&qu ...
- Springboot：IDEA重调安装依赖窗口（二）
Settings-Plugins 搜索Editstarters: 安装完插件 重启idea: 查看安装是否成功: 在pom.xml 右键: 选择热部署依赖 点击ok进行自动装配: 热部署依赖环境已经配 ...
- Netty入门与实战教程总结分享
前言:都说Netty是Java程序员必须要掌握的一项技能,带着不止要知其然还要知其所以然的目的,在慕课上找了一个学习Netty源码的教程,看了几章后着实有点懵逼.虽然用过Netty,并且在自己的个人网 ...