vue1.0 的过滤器
vue1.0 自带的过滤器：
一 、过滤器写法
{{ message | Filter}}
二、 Vue自带的过滤器:capitalize
功能:首字母大写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue自带的过滤器</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
{{message | capitalize}}
</div>
<script type="text/javascript">
var myVue = new Vue({
el: ".test",
data: {
message: "abc"
}
})
</script>
</body>
</html>
上面代码输出:Abc
三 、Vue自带的过滤器:uppercase
功能:全部大写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue自带的过滤器</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
{{message | uppercase}}
</div>
<script type="text/javascript">
var myVue = new Vue({
el: ".test",
data: {
message: "abc"
}
})
</script>
</body>
</html>
上面代码输出:ABC
四 、Vue自带的过滤器:uppercase
功能:全部小写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue自带的过滤器</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
{{message | lowercase}}
</div>
<script type="text/javascript">
var myVue = new Vue({
el: ".test",
data: {
message: "ABC"
}
})
</script>
</body>
</html>
上面代码输出:abc
五、 Vue自带的过滤器:currency
功能:输出金钱以及小数点
参数:
第一个参数 {String} [货币符号] - 默认值: '$'
第二个参数 {Number} [小数位] - 默认值: 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue自带的过滤器</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
{{message | currency}} <!--输出$123.47-->
{{message | currency '¥' "1"}} <!--输出$123.5-->
</div>
<script type="text/javascript">
var myVue = new Vue({
el: ".test",
data: {
message: "123.4673"
}
})
</script>
</body>
</html>
六、 Vue自带的过滤器:pluralize
功能: 如果只有一个参数，复数形式只是简单地在末尾添加一个 “s”。如果有多个参数，参数被当作一个字符串数组，对应一个、两个、三个…复数词。如果值的个数多于参数的个数，多出的使用最后一个参数。
参数：{String} single, [double, triple, ...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue自带的过滤器</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
{{message}} {{message | pluralize 'item'}} <!--输出: 1 item--> <ul v-for="item in lili">
<li>
{{item}} {{item | pluralize 'item'}} <!--输出: 1 item 2 items 3 items-->
</li>
</ul> <ul v-for="item in lili">
<li>
{{item}} {{item | pluralize 'st' 'rd'}} <!--输出: 1 st 2 rd 3 rd-->
</li>
</ul> <ul v-for="item in man">
<li>
{{item}} {{item | pluralize 'item'}} <!--输出: 1 item 2 items 3 items-->
</li>
</ul> <ul v-for="item in man">
<li>
{{item}} {{item | pluralize 'st' 'rd'}} <!--输出: 1 st 2 rd 3 rd-->
</li>
</ul>
</div>
<script type="text/javascript">
var myVue = new Vue({
el: ".test",
data: {
message: 1,
lili: [1,2,3],
man: {
name1: 1,
name2: 2,
name3: 3
}
}
})
</script>
</body>
</html>
七 、Vue自带的过滤器:debounce
(1)限制： 需在@里面使用
(2)参数:{Number} [wait] - 默认值： 300
(3)功能：包装处理器，让它延迟执行 x ms， 默认延迟 300ms。包装后的处理器在调用之后至少将延迟 x ms， 如果在延迟结束前再次调用，延迟时长重置为 x ms。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue自带的过滤器</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
<button id="btn" @click="disappear | debounce 10000">点击我,我将10秒后消失</button>
</div>
<script type="text/javascript">
var myVue = new Vue({
el: ".test",
methods: {
disappear: function () {
document.getElementById("btn").style.display= "none";
}
}
})
</script>
</body>
</html>
八、 Vue自带的过滤器:limitBy
(1)限制:需在v-for(即数组)里面使用
(2)两个参数:
第一个参数:{Number} 取得数量
第二个参数:{Number} 偏移量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue自带的过滤器</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
<ul v-for="item in lili | limitBy 10"> <!--输出1 2 3 4 5 6 7 8 9 10-->
<li>{{item}}</li>
</ul>
<ul v-for="item in lili | limitBy 10 3"> <!--输出 4 5 6 7 8 9 10 11 12 13-->
<li>{{item}}</li>
</ul>
</div>
<script type="text/javascript">
var myVue = new Vue({
el: ".test",
data: {
lili: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
}
})
</script>
</body>
</html>
九 、Vue自带的过滤器:filterBy
(1)限制:需在v-for(即数组)里面使用
(2)三个参数:
第一个参数: {String | Function} 需要搜索的字符串
第二个参数: in (可选,指定搜寻位置)
第三个参数: {String} (可选,数组格式)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue自带的过滤器</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
<ul v-for="item in lili | filterBy 'o' "> <!--输出oi oa lo ouo oala-->
<li>{{item}}</li>
</ul> <ul v-for="item in man | filterBy 'l' in 'name' "> <!--输出lily lucy-->
<li>{{item.name}}</li>
</ul> <ul v-for="item in man | filterBy 'l' in 'name' 'dada' "> <!--输出lily+undefined lucy+undefined undefined+lsh-->
<li>{{item.name+"+"+item.dada}}</li>
</ul>
</div>
<script type="text/javascript">
var myVue = new Vue({
el: ".test",
data: {
lili: ["oi", "oa", "ll", "lo" ,"ouo" ,"kk" ,"oala"],
man: [ //此处注意man是数组,不是对象
{name: "lily"},
{name: "lucy"},
{name: "oo"},
{dada: "lsh"},
{dada: "ofg"}
]
}
})
</script>
</body>
</html>
十、 Vue自带的过滤器:orderBy
(1)限制:需在v-for(即数组)里面使用
(2)三个参数:
第一个参数: {String | Array<String> | Function} 需要搜索的字符串
第二个参数: {String} 可选参数 order 决定结果升序（order >= 0）或降序（order < 0）,默认是升序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue自带的过滤器</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
<!--遍历数组-->
<ul v-for="item in lili | orderBy 'o' 1"> <!--输出kk ll oi-->
<li>{{item}}</li>
</ul> <ul v-for="item in lili | orderBy 'o' -1"> <!--输出oi ll kk-->
<li>{{item}}</li>
</ul> <!--遍历含对象的数组-->
<ul v-for="item in man | orderBy 'name' 1"> <!--输出Bruce Chuck Jackie-->
<li>{{item.name}}</li>
</ul> <ul v-for="item in man | orderBy 'name' -1"> <!--输出Jackie Chuck Bruce-->
<li>{{item.name}}</li>
</ul> <!--使用函数排序-->
<ul v-for="item in man | orderBy ageByTen"> <!--输出Bruce Chuck Jackie-->
<li>{{item.name}}</li>
</ul>
</div>
<script type="text/javascript">
var myVue = new Vue({
el: ".test",
data: {
lili: ["oi", "kk", "ll"],
man: [ //此处注意man是数组,不是对象
{
name: 'Jackie',
age: 62
},
{
name: 'Chuck',
age: 76
},
{
name: 'Bruce',
age: 61
}
]
},
methods: {
ageByTen: function () {
return 1;
}
}
})
</script>
</body>
</html>
自定义过滤器：
格式：
当有多个参数的情况下，用空格隔开就好
Vue.filter(filterName ,function(input){
// fn
}); 调用： {{msg | filterName ‘c1’ ‘c2’}}
<div id="box1">
{{aa}}
<br>
{{sum | addZero}}
<br>
{{date| toDate}}
<br>
{{msg | filterHtml}}
</div>
<script>
Vue.filter('addZero',function (val){
return val<10?'0'+val:val;
})
// Vue 自定义过滤器方式2 带有多个参数的
// Vue.filter(filterName,fn)
Vue.filter('addZero',function (val,c1,c2){
if (c1 || c2) alert(c1+'----'+c2)
return val<10?'0'+val:val;
}) //日期格式
Vue.filter('toDate',function (val){
var oDate = new Date(val);
return oDate.getFullYear()+'/'+(oDate.getMonth()+1)+'/'+oDate.getDate()+' '+ oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds()
}) //过滤html
Vue.filter('filterHtml',function (val){
return val.replace(/<[^<]+>/g,'');
})
var vm = new Vue({
el : "#box1",
data : {
arr: ['apple','orange','pear','banana','age'],
sum: 20,
date : Date.now(),
msg : '<strong>welcome</strong>'
},
methods : {
add : function (){
alert(111)
}
}
});
</script>
.
vue1.0 的过滤器的更多相关文章
- vue1.0和vue2.0的区别(二)
这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说 四.循环 学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西 而v ...
- Vue1.0到2.0变化
一.生命周期 二.代码片段 在vue1.0中可以在template编写时出现: <template> <div>第一行</div> <div>第二行&l ...
- vue2.x和vue1.0
1.首先挂载方式上 在vue2.0中,如果使用body或者html作为挂载点,则会报以下警告: Do not mount Vue to <html> or <body> - m ...
- vue1.0 与 Vue2.0的一些区别 及用法
1.Vue2.0的模板标记外必须使用元素包起来: eg:Vue1.0的写法 <!DOCTYPE html> <html> <head> <meta chars ...
- 【重点突破】—— Vue1.0到Vue2.0的变化
前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习. 组件模板不再支持片段代码,必须有一个顶级元素包裹,例如: ...
- 【转】vue1.0与2.0的一些区别
一.生命周期钩子的差别 vue1.0的生命周期如下: vue2.0的生命周期如下: 用一张表格来做对比: 二.代码片段 在vue1.0中可以在template编写时出现: <template&g ...
- Vue1.0用法详解
Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性. 开发环境部署 可参考使用 vue+webpack. 基本用法 1 2 3 ...
- 使用vue1.0+es6+vue-cli+webpack+iview-ui+jQuery 撸一套高质量的后台管理系统
首先按照vue.js官网的指令安装: 1.本地安装好node.js 2.根据官方命令行工具 详情 这样一个官方的脚手架工具就已经搭建好了:但是有一点需要注意的是由于现在按照官方的搭建方法是搭建vue2 ...
- vue1.0和vue2.0的区别(一)
今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是: <template> <h3>我是组件</h3> ...
随机推荐
- 32、Flask实战第32天：优化json数据的返回
接着上节,我们通过jsonify返回json数据非常方便 ... return jsonify({"code": 400, "message": message ...
- ProxyStrike运行bug解决办法
ProxyStrike运行bug解决办法 由于curl中参数CURLOPT_SSL_VERIFYHOST的值取消原有的值1,导致ProxyStrike无法正常运行.所以,要运行该工具,需要手动修改/ ...
- JZYZOJ1383 [usaco2003feb]impster 位运算 最短路
http://172.20.6.3/Problem_Show.asp?id=1383 找能到达某个状态的最小操作数,然后把所有状态扫一遍即可,要额外判定一下起始就有的状态(如果起始里没有0那么这些状 ...
- BZOJ 3524 [Poi2014]Couriers（二分+蒙特卡罗）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3524 [题目大意] 给一个长度为n的序列a.1≤a[i]≤n. m组询问,每次询问一个 ...
- FutureTask源码分析
1. 常量和变量 private volatile int state; // 任务状态 private static final int NEW = 0; private static final ...
- Linux设备模型（总结）
转:http://www.360doc.com/content/11/1219/16/1299815_173418267.shtml 看了一段时间的驱动编程,从LDD3的hello wrod到后来的字 ...
- 突破，Objective-C开发速学手册
<突破,Objective-C开发速学手册> 基本信息 作者: 傅志辉 出版社:电子工业出版社 ISBN:9787121207426 上架时间:2013-7-12 出版日期:2013 年8 ...
- ECMAScript 6(ES6)常用语法
一:Let和const (1)Let定义块级作用域的变量,var定义的变量会提升.Let不会提升. 如下.var可以先用,打印是undefined但是let在定义之前是不能用的. 会报错Uncaug ...
- pyqt5生成的APP制作DMG
http://blog.csdn.net/wudj810818/article/details/70557284 1.环境 Mac OS Python3.5 PyQt5 2.所需工具 Pyinstal ...
- 二十四种设计模式：备忘录模式(Memento Pattern)
备忘录模式(Memento Pattern) 介绍在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态.这样以后就可将该对象恢复到保存的状态. 示例有一个Message实体类,某 ...