vue的过滤器
2018-09-18 本文已影响0人
信不由衷
1.个局部过滤器和全局过滤器的书写格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- vue过滤器：对页面上的数据进行筛选和过滤-->
<div id="app">
<h1>{{num|addzero}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
/*全局过滤器：Vue.filter("addzero",function(data){
if(data<10){
return "0"+data
}else{
return data
}
})*/
new Vue({
el:"#app",
data:{
num:Math.floor(Math.random()*(20-0+1)+0)
},
/*局部过滤器：*/ filters:{
addzero:function(data){
if(data<10){
return "0"+data
}else{
return data
}
}
}
})
</script>
</body>
</html>
2.用过滤器保留两位小数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{num|addzero}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
num:Math.random()*20
},
filters:{
addzero:function(data){
return data.toFixed(2)
}
}
})
</script>
</body>
</html>
3.有过滤器获取此时的时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{new Date()|date}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
Vue.filter("date",function(date){
return date.getFullYear()+"年"+(date.getMonth())+1+"月"+date.getDate()+"日"+"星期"+date.getDay()+date.getHours()+"时"+date.getMinutes()+"分"+date.getSeconds()+"秒"
})
new Vue({
el:"#app"
})
</script>
</body>
</html>
