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>
filters过滤器
<div id='app'>
数字1：{{num1:toInt}}
数字2：{{num2:toInt}}
数字3：{{num3:toInt}}
</div>
通过管道符|把函数toInt放在变量后面，num1，num2，num3会分别作为参数value传入toInt（value）方法进行运算，并返回一个整数。
let vm=new Vue({
el:'#app',
data:{
num1:33.11,
num2:23.22,
num3:90.65
},
//过滤器
filters:{
toInt(value){//ES6语法
return pparseInt(value)
}
}
})
参数对象除了el和data属性之外，还多了一个filters属性，它的值就是一个对象，里面定义了一个叫toInt()的方法，传入了一个value的参数，函数的作用就是把传入的参数value，简单地转成一个整出并return回去。
Vue基础知识之过滤器（四）的更多相关文章
- [SQL] SQL 基础知识梳理（四） - 数据更新
SQL 基础知识梳理(四) - 数据更新 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5929786.html 序 这是<SQL 基础知识梳理( ...
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
- Vue基础知识之vue-resource和axios
Vue基础知识之vue-resource和axios 原文链接:http://www.cnblogs.com/Juphy/p/7073027.html vue-resource Vue.js是数据驱 ...
- Go基础知识梳理（四）
Go基础知识梳理(四) GO的哲学是"不要通过共享内存来通信,而是通过通信来共享内存",通道是GO通过通信来共享内存的载体. rumtime包常用方法 runtime.NumGor ...
- Vue基础知识简介
基础知识: vue的生命周期: beforeCreate/created.beforeMount/mounted.beforeUpdate/updated.beforeDestory/destorye ...
- Kali Linux渗透基础知识整理（四）：维持访问
Kali Linux渗透基础知识整理系列文章回顾 维持访问 在获得了目标系统的访问权之后,攻击者需要进一步维持这一访问权限.使用木马程序.后门程序和rootkit来达到这一目的.维持访问是一种艺术形式 ...
- 数据库基础知识详解四：存储过程、视图、游标、SQL语句优化以及索引
写在文章前:本系列文章用于博主自己归纳复习一些基础知识,同时也分享给可能需要的人,因为水平有限,肯定存在诸多不足以及技术性错误,请大佬们及时指正. 11.存储过程 存储过程是事先经过编译并存储在数 ...
- Vue基础知识总结（二）
一.解决网速慢的时候用户看到花括号标记 (1)v-cloak,防止闪烁,通常用于比较大的选择器上. 给元素添加属性v-cloak,然后style里面:[v-cloak]{display:none;} ...
- Vue基础知识总结（一）
一.基本语法: 1.实例化:new Vue({}) 2.el:一定是根容器元素(vue的作用域就是这个根元素内),就是写选择器 data:用于存储数据 methods:定义方法(方法里th ...
随机推荐
- [原][osgearth]设置OE的高程，高度场的数据。修改设置高度值
; row < hf->getNumRows(); ++row ) { ; col < hf->getNumColumns(); ++col ) { float val = h ...
- 【Python】xlrd，NotImplementedError-formatting_info=True not yet implemented
前言 Python需要读取Excel(.xls..xlsx)时通常使用xlrd模块:如果要对其内容进行编辑的话稍稍有些麻烦,通常的做法是使用xlutils的copy模块对原文件进行复制,然后保存成新的 ...
- wpf中把按钮变成圆角
<Button x:Name="btn" Content="改变" Width="100" Height="50&quo ...
- 038——VUE中组件之WEB开发中组件使用场景与定义组件的方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- hdu2883
题解: 网络流 用一个离散化 代码: #include<cstdio> #include<cstring> #include<algorithm> using na ...
- RabbitMQ 基础类和概念讲解
转至:http://www.ostest.cn/archives/497 引言 你是否遇到过两个(多个)系统间需要通过定时任务来同步某些数据?你是否在为异构系统的不同进程间相互调用.通讯的问题而苦恼. ...
- Junit4与junt3并存时产生的问题
目前的项目里用junit写单元测试,使用的是junit4,由于大部分开发之前使用的都是junit3,对junit4还不是很熟悉,所以出现了junit3和4混合使用的情况,导致发生了一些问题,这里列举一 ...
- 1元抢卡巴KAV_不限量疯抢即日起至2013.10.31截止
活动地址:http://img.kaba365.com/mail_files/kaba1yuan.html
- 集成学习之Boosting —— Gradient Boosting实现
Gradient Boosting的一般算法流程 初始化: \(f_0(x) = \mathop{\arg\min}\limits_\gamma \sum\limits_{i=1}^N L(y_i, ...
- React Diff 算法
React介绍 React是Facebook开发的一款JS库,用于构建用户界面的类库. 它采用声明式范例,可以传递声明代码,最大限度地减少与DOM的交互. 特点: 声明式设计:React采用声明范式, ...