過濾器: vue提供過濾器: capitalize uppercase currency.... ? 1 2 3 <div id="box"> {{msg|currency ¥}} </div> ? 1 2 3 <div id="box"> {{msg|currency ¥}} </div> ? 1 ...
過濾器:
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>
|