第六节:Vue过滤器的用法和自定义过滤器
1、过滤器的用法,用 ‘|’ 分割表达式和过滤器。
例如:{{ msg | filter}} {{msg | filter(a)}} a就标识filter的一个参数。
用两个过滤器:{{msg | myfilter | myfilternumber }}
2、自定义的过滤器
过滤器的结构为:Vue.filter("id",function(value,a){});
value是过滤器的一个参数,也是默认的原始值。a是自定义的一个参数。
自定义过滤器的例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> <style> </style> </head> <body> <div id="app"> <!--输出的字符串中a的个数--> <span>msg的值:{{msg}},其中a的个数:</span> {{msg | myfilter('a')}} <br> <!--输出的字符串中b的个数--> <span>msg的值:{{msg}},其中b的个数:</span> {{msg | myfilter | myfilternumber}} </div> </body> <script type="text/javascript"> Vue.filter("myfilter", function(value, arg) { //返回一个对象或者json字符串,列出字符串中的字符以及字符的个数,不区分大小写 var obj = {}; var s = value.split('').sort().join(""); var reg = /(.)\1+/ig; var str = s.replace(reg, "$1"); //字符串去重后的结果 var i = 0, n, a; while (s.length > 0) { a = str.charAt(i); n = s.lastIndexOf(a) + 1; obj[a] = n; s = s.substring(n); i++; } return arg ? obj[arg] : obj; }); Vue.filter("myfilternumber", function(value) { return value.b; }); var app1 = new Vue({ el: "#app", data: { msg: "a1a1aba2babac" }, methods: { } }); </script> </html>
第六节:Vue过滤器的用法和自定义过滤器的更多相关文章
- Web框架之Django_04 模板层了解(过滤器、标签、自定义过滤器、标签、inclusion_tag、模板的继承与导入)
摘要: 模版层(模板语法) 模板语法 过滤器 标签 自定义过滤器.标签 inclusion_tag 模板的继承 模板的导入 一.模板语法: 常用语法:{{ }} 变量相关{% %} ...
- Django自定义过滤器及标签
一.自定义过滤器 1.自定义过滤器文件存放位置 在APP应用下创建名为templatetags(该文件夹名固定)的文件包(包含__init__.py文件) 注意APP必须在setting中注册 即在s ...
- Django 自定义过滤器
设定自定义过滤器之前要现在配置文件内把自己项目名在 INSTALLED_APPS 内导入 #已安装的django应用 INSTALLED_APPS = [ 'django.contrib.admin' ...
- AngularJS中自定义过滤器
AngularJS中为我们提供了一些内置的过滤器,这里列举一些自定义过滤器的场景. 自定义过滤器,不带参赛 //过滤 不带参赛 app.filter('ordinal', function () { ...
- hbase 自定义过滤器
1.首先生成自定义过滤器,生成jar包,然后拷贝到服务器hbase目录的lib下. 1.1 自定义过滤器CustomFilter import com.google.protobuf.InvalidP ...
- django自定义过滤器和标签
1.自定义过滤器和标签的流程: 1.在某个app下创建一个名为templatetags(必需,且包名不可变)的包.假设我们在名为app01的app下创建了一个templatetags的包,并在该包下创 ...
- Django模板之自定义过滤器/标签/组件
自定义步骤: 1. 在settings中的INSTALLED_APPS配置当前app,不然django无法找到自定义的simple_tag. 2. 在app应用中创建templatet ...
- Spring Cloud Gateway自定义过滤器实战(观测断路器状态变化)
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- ASP.NET MVC深入浅出(被替换) 第一节: 结合EF的本地缓存属性来介绍【EF增删改操作】的几种形式 第三节: EF调用普通SQL语句的两类封装(ExecuteSqlCommand和SqlQuery ) 第四节: EF调用存储过程的通用写法和DBFirst模式子类调用的特有写法 第六节: EF高级属性(二) 之延迟加载、立即加载、显示加载(含导航属性) 第十节: EF的三种追踪
ASP.NET MVC深入浅出(被替换) 一. 谈情怀-ASP.NET体系 从事.Net开发以来,最先接触的Web开发框架是Asp.Net WebForm,该框架高度封装,为了隐藏Http的无状态 ...
随机推荐
- 编译nginx时,编译参数注意点
--prefix=/usr/local/nginx-1.3.1 有利于统一放置nginx的所有文件,方便管理,强烈建议设置 --with-http_stub_status_module 支 ...
- ruby 学习笔记 2 -变量
变量 在ruby的世界里,变量有5种,全局变量 局部变量 实例变量 常量 类变量以及伪变量 常用的: 全局: 在全局使用,使用$开头,因为是全局的,所以在任何的代码例子中都可以改变其值,造成混乱,所以 ...
- Python基于pandas的数据处理(二)
14 抽样 df.sample(10, replace = True) df.sample(3) df.sample(frac = 0.5) # 按比例抽样 df.sample(frac = 10, ...
- 项目文件""已被重命名或已不在解决方案中
如题,这个错误在vs2010里,开始编译的时候出现了,我的解决办法就是把所有的project都移除,然后再添加进来,就不弹这个错误了.
- "微空间"免费空间很棒哦,很适合中小网站站长
“微空间”(www.idcbt.com)是最长久的免费云主机 现在在站长圈子里面非常火爆的“微空间”免费空间网(www.idcbt.com)犹如火山爆发一样,瞬间成为了广大站长津津乐道的免费主机空间. ...
- linux shell 字符串操作
转:http://justcoding.iteye.com/blog/1963463 在做shell批处理程序时候,经常会涉及到字符串相关操作.有很多命令语句,如:awk,sed都可以做字符串各种操作 ...
- [leetcode 35] Search Insert Position
1 题目: Given a sorted array and a target value, return the index if the target is found. If not, retu ...
- Linux下PHP安装oci8扩展
PHP通常搭配Mysql使用,但有时候也会连接到Oracle数据库.安装PHP的oci8扩张之前,需要先安装Oracle Instant Client( basic 或 basic lite 版就行了 ...
- CSharpGL(40)一种极其简单的半透明渲染方法
CSharpGL(40)一种极其简单的半透明渲染方法 开始 这里介绍一个实现半透明渲染效果的方法.此方法极其简单,不拖累渲染速度,但是不能适用所有的情况. 如下图所示,可以让包围盒显示为半透明效果. ...
- PSP个人耗时
PSP2.1 Personal Software Process Stage Time(min) Planing 计划 20 #Estimate #估计这个任务需要多长时间 180 Developi ...