vue 过滤器
过滤器:
vue1.0 提供过滤器:
系统就自带很多过滤 capitalize uppercase currency json....
{{msg | currency}}
{{msg | json}}
....
limitBy
filterBy
.....
一些简单功能，自己通过js实现
debounce 配合事件，延迟执行
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.comtitle>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
style>
<script src="vue.js">script>
<script>
script>
head>
<body>
<div id="box">
<input type="text" @keyup="show | debounce 2000">
div>
<script>
var vm=new Vue({
data:{
},
methods:{
show:function(){
alert(1);
}
}
}).$mount('#box');
script>
body>
html>
@keyup="show | debounce 2000"
数据配合使用过滤器:
limitBy 限制几个
limitBy 参数(取几个)
limitBy 取几个 从哪开始
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.comtitle>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
style>
<script src="vue.js">script>
<script>
script>
head>
<body>
<div id="box">
<ul>
<li v-for="val in arr | limitBy 2 arr.length-2">
{{val}}
li>
ul>
div>
<script>
var vm=new Vue({
data:{
arr:[1,2,3,4,5]
},
methods:{
}
}).$mount('#box');
script>
body>
html>
v-for="val in arr | limitBy 2 arr.length-2"
filterBy 过滤数据
filterBy ‘谁’
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.comtitle>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
style>
<script src="vue.js">script>
<script>
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>
<script>
var vm=new Vue({
data:{
arr:['width','height','background','orange'],
a:''
},
methods:{
}
}).$mount('#box');
script>
body>
html>
v-for="val in arr | filterBy a"
li v-for="val in arr | filterBy 'w'"
orderBy 排序
orderBy 谁 1/-1
1 -> 正序
2 -> 倒序
自定义过滤器: model ->过滤 -> view
Vue.filter(name,function(input){ });
时间转化器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.comtitle>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
style>
<script src="vue.js">script>
<script>
script>
head>
<body>
<div id="box">
{{a | date}}
div>
<script>
Vue.filter('date',function(input){
var oDate=new Date(input);
return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();
});
var vm=new Vue({
data:{
a:Date.now()
},
methods:{
}
}).$mount('#box');
script>
body>
html>
.filter('date',function(input){}）
双向过滤器:*
model -> view（数据 -> 视图）
view -> model
Vue.filter('filterHtml',{
read:function(input){ //model-view
return input.replace(/<[^<+]>/g,'');
},
write:function(val){ //view -> model
return val;
}
});
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.comtitle>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
style>
<script src="vue.js">script>
<script>
//welcome
Vue.filter('filterHtml',{
read:function(input){ //model-view
alert(1);
return input.replace(/<[^<]+>/g,'');
},
write:function(val){ //view -> model
console.log(val);
return val;
}
});
window.onload=function(){
var vm=new Vue({
data:{
msg:'welcome'
}
}).$mount('#box');
};
script>
head>
<body>
<div id="box">
<input type="text" v-model="msg | filterHtml">
<br>
{{{msg}}}
div>
body>
html>
t.replace(/<[^<]+>/g,'')
vue2。0
到了2.0， 内置过滤器，全部删除了
lodash 工具库 _.debounce(fn,200)
自定义过滤器——还有
但是,自定义过滤器传参
之前: {{msg | toDou '12' '5'}}
现在: {{msg | toDou('12','5')}}