您的位置：首页 > Web前端 > Vue.js

《vue2.0 框架学习》--过滤器

2018-09-24 18:14 218 查看

过滤器

       1.内部过滤器
       2.全局过滤器
       3.优先级：就近原则
4.逗号操作符
5.匿名函数

demo

[code]<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航