过滤器
1.内部过滤器
2.全局过滤器
3.优先级：就近原则
4.逗号操作符
5.匿名函数
demo
<!DOCTYPE html>
<html>
<head>
<title>vue2.0 filter</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script src="../node_modules/vue/dist/vue.js"></script>
<style>
a{text-decoration: none;}
[v-cloak]{display: none;}
</style>
</head>
<body>
<div id="app" v-cloak>
<p>{{3.1415926|toFixed(2)}}</p>
<p>{{0 | format}}</p>
<p>{{9 | format}}</p>
<p>{{10 | format}}</p>
<button @click="show">{{flag |conversion}}</button>
<ul v-if="!flag">
<li>{{msg}}</li>
</ul>
<!-- inline -->
<p>
<select name="hobby" id="hobby">
<option :value="item.id" v-for="item in hobby">
{{item.con}}
</option>
</select>
</p>
<p>{{currentTime | timeFormat()}}</p>
</div>
<script>
// dom 文档加载完成后
// 全局 --页面加载
Vue.filter('toFixed',function(data,pram){
return data.toFixed(n);
});
Vue.filter('format',function(data,pram){
return (data<10)?'0'+data:data;
});
// 时间-时间戳
Vue.filter('timeFormat',function(data,pram){
let d = new Date(data);
return d.getFullYear() +"-"+(d.getMonth()+1)+"-"+d.getDate();
});
window.onload = function(){
new Vue({
el:'#app',
data:{
currentTime:new Date().getTime(),
hobby:[
{
id:"1",
con:"吃饭",
},
{
id:"2",
con:"睡觉",
},
{
id:"3",
con:"打豆豆",
}
],
flag:true,
value:'',
msg:'hello vue'
},
filters:{
conversion:function(type){
switch(type){
case true:
return '显示';
break;
case false:
return '隐藏';
break;
}
},
toFixed:function(data,n){
return data.toFixed(n);
}
},
methods:{
show:function(){
this.flag = !this.flag;
},
handler:function(ev){
console.log(this.msg);
// ev.stopPropagation();
}
}
});
}
</script>
</body>
</html>