vue過濾器用法實例分析
阿新 • • 發佈：2019-03-25
contain bounce erb width ring ref bsp mod lai
?
過濾器:
vue提供過濾器:
capitalize uppercase currency....
?| 1 2 3 |
<div id="box">
{{msg|currency ￥}}
</div>
|
debounce 配合事件，延遲執行
?| 1 2 3 |
<div id="box">
<input type="text" @keyup="show | debounce 2000">
</div>
|
數據配合使用過濾器:
limitBy 限制幾個
limitBy 參數(取幾個)
limitBy 取幾個 從哪開始
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div id="box">
<ul>
<!--取2個-->
<li v-for="val in arr | limitBy 2">
{{val}}
</li>
<br/>
<br/>
<!--取2個，從第arr.length-2個開始取-->
<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>
|
vue插件filterBy 過濾數據
filterBy ‘誰‘
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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>
|
angular orderBy 排序
orderBy 誰 1/-1
1 -> 正序
2 -> 倒序
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div id="box">
<input type="text" v-model="a">
<ul>
<li v-for="val in arr | orderBy -1">
{{val}}
</li>
</ul>
</div>
<script>
var vm=new Vue({
data:{
arr:[‘width‘,‘height‘,‘background‘,‘orange‘],
a:‘‘
},
methods:{
}
}).$mount(‘#box‘);
</script>
|
自定義過濾器: model ->過濾 -> view
?| 1 2 |
Vue.filter(name,function(input){
});
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div id="box">
{{a | toDou 1 2}}
</div>
<script>
Vue.filter(‘toDou‘,function(input,a,b){
alert(a+‘,‘+b);
return input<10?‘0‘+input:‘‘+input;
});
var vm=new Vue({
data:{
a:9
},
methods:{
}
}).$mount(‘#box‘);
</script>
|
時間轉化器
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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()//返回1970 年 1 月 1日午夜與當前日期和時間之間的毫秒數。
},
methods:{
}
}).$mount(‘#box‘);
</script>
|
50、選擇器過濾html標記
雙向過濾器:*
?| 1 2 3 4 5 6 7 8 |
Vue.filter(‘filterHtml‘,{
read:function(input){ //model-view
return input.replace(/<[^<+]>/g,‘‘);
},
write:function(val){ //view -> model
return val;
}
});
|
數據 -> 視圖
model -> view
view -> model
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
<script src="vue.js"></script>
<script>
//<h2>welcome</h2>
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:‘<strong>welcome</strong>‘
}
}).$mount(‘#box‘);
};
</script>
</head>
<body>
<div id="box">
<input type="text" v-model="msg | filterHtml">
<br>
{{msg | filterHtml}}
</div>
</body>
</html>
|
vue過濾器用法實例分析