您的位置：首页 > 产品设计 > UI/UE

【10】vue.js — 过滤器

2017-09-07 11:20 357 查看

debounce延迟执行

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="box">
<input type="button" value="点击" @click="show | debounce 2000" />
</div>
</body>
<script>
var vm = new Vue({
methods: {
show: function() {
alert(1);
}
}
}).$mount('#box')
</script>
</html>

上述代码当我们点击【点击】按钮之后，页面会延迟2000毫秒执行show方法

filterBy过滤筛选

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="box">
<input type="text" v-model="a" />
<ul>
<li v-for="val in arr | filterBy a">
{{val}}
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
data: {
arr: ['width','height','background','orange'],
a: ''
}
}).$mount('#box');
</script>
</html>

当我们在上述的

input

输入框中录入数据时，比如录入

，将会对arr数据进行筛选，筛选完后只有width和height

limitBy限制筛选数量

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="box">
<input type="number" v-model="a" />
<ul>
<li v-for="val in arr | limitBy a">
{{val}}
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
data: {
arr: ['width','height','background','orange'],
a: 2
}
}).$mount('#box');
</script>
</html>

limitBy是对数据数量限制，我们还可以这样写

<li v-for="val in arr | limitBy 2 arr.length-2">

，这样表示限制数量为2个但是从下标为arr.length-2(包含)开始。

orderBy排序

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="box">
<input type="number" v-model="a" />
<ul>
<li v-for="val in arr | orderBy true">
{{val}}
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
data: {
arr: ['width','height','background','orange'],
a: ''
}
}).$mount('#box');
</script>
</html>

orderBy true：表示正序排列

orderBy false：表示倒序排列

自定义过滤器 — 使单位数据变为两位数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="box">
<ul>
<li v-for="value in arr">
{{value | toDou 1 2}}
</li>
</ul>
</div>
</body>
<script>
Vue.filter('toDou',function(input,a,b) {
console.info('参数：a的值' + a + '和b的值' + b);
return input<10?'0'+input : ''+input;
});
var vm = new Vue({
data: {
arr: [1,2,3,11]
}
}).$mount('#box');
</script>
</html>

自定义过滤器 — 格式化时间

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="box">
{{a | date}}
</div>
</body>
<script>
Vue.filter('date',function(input){
var oDate = new Date(input);
return oDate.getFullYear() + '年' + (oDate.getMonth() + 1) + "月"
+  oDate.getHours() + "点" + oDate.getMinutes() + "分" + oDate.getSeconds() + "秒";
});
var vm = new Vue({
data: {
a: Date.now()
}
}).$mount('#box');
</script>
</html>

自定义过滤器 - 获取html标签内的内容

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="box">
{{msg | filterHTML}}
</div>
</body>
<script>
Vue.filter('filterHTML',function(input){
return input.replace(/<[^<]+>/g,'');
});
var vm = new Vue({
data: {
msg: '<strong>welcome</strong>'
}
}).$mount('#box');
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue 过滤器

相关文章推荐

新的分享

章节导航