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> ...
随机推荐
- Luogu P3258 松鼠的新家（树链剖分+线段树/树状数组）
题面 题解 这种题目一看就是重链剖分裸题,还是区间修改,单点查询,查询之前在遍历时要记一个\(delta\),因为这一次的起点就是上一次的终点,不需要放糖,所以可以用\(BIT\)来写,但我写完\(m ...
- 洛谷——P2799 国王的魔镜
P2799 国王的魔镜 题目描述 国王有一个魔镜,可以把任何接触镜面的东西变成原来的两倍——只是,因为是镜子嘛,增加的那部分是反的.比如一条项链,我们用AB来表示,不同的字母表示不同颜色的珍珠.如果把 ...
- mysql无法输入中文排错
题记:以前都是使用可视化界面创建数据库,进行操作的,但是今天使用cmd窗口进行操作发现出错了. 以前记得自己使用cmd也是可以正确操作的,但是这次却出错了,在网上找了很多解决的办法,最后还是靠自己慢慢 ...
- 【爬虫】python requests模拟登录知乎
需求:模拟登录知乎,因为知乎首页需要登录才可以查看,所以想爬知乎上的内容首先需要登录,那么问题来了,怎么用python进行模拟登录以及会遇到哪些问题? 前期准备: 环境:ubuntu,python2. ...
- spring面试题 对DI , AOP概念的理解
1.降低了组件之间的耦合性 ,实现了软件各层之间的解耦 2.可以使用容易提供的众多服务,如事务管理,消息服务等 3.容器提供单例模式支持 4.容器提供了AOP技术,利用它很容易实现如权限拦截,运行期监 ...
- 【动态规划】【记忆化搜索】hdu5965 扫雷
f(i,j,k)表示第i行,放的雷的状态为j{0表示不放,1表示往上放,2表示往下放,3表示上下都放},剩余还有k(0<=k<=2)个要放的方案数. 先给出我这个sb写的错误代码,死都没调 ...
- Educational Codeforces Round 9 A. Grandma Laura and Apples 水题
A. Grandma Laura and Apples 题目连接: http://www.codeforces.com/contest/632/problem/A Description Grandm ...
- PLM_百度百科
PLM_百度百科 ZDLINK
- iOS中nil、Nil、NULL、NSNull详解
nil nil 是 ObjC 对象的字面空值,对应 id 类型的对象,或者使用 @interface 声明的 ObjC 对象. 例如: NSString *someString = nil; NSUR ...
- [Linux] Linux smaps接口文件结构
在Linux内核 2.6.16中引入了一个系统内存接口特性,这个接口位于/proc/$pid/目录下的smaps文件中 ,一看内容发现是进程内存映像信息,比同一目录下的maps文件更详细些. 400d ...