让要显示在页面上的内容进行重新筛选,分为两种:
1.全局过滤器 2.局部过滤器
1.全局过滤器
例:
html部分
<div id="itany">
<p>{{new Date()|time}}</p>
</div>
js部分
<script>
new Vue({
el: "#itany",
filters: {
time: function(data) {
return data.getFullYear() + '年' + (data.getMonth() + 1) + '月' + data.getDate() + '日,星期' + data.getDay() + ',' + data.getHours() + '点' + data.getMinutes() + '分' + data.getSeconds() + '秒';
}
}
})
</script>
2.局部过滤器
例:
html部分
<div id="itany">
<p>{{12|zore}}</p>
</div>
js部分
<script>
Vue.filter("zore",function(data){
if(data<10){
return "0"+data;
}else{
return data;
}
})
new Vue({
el:"#itany"
})
</script>
3.计算函数
例1:
html部分
<div id="itany">
<h1>{{count}}</h1>
</div>
js部分
<script>
new Vue({
el: "#itany",
data: {
msg: "hello vue"
},
computed: {
count: function() {
return this.msg.split(" ").reverse().join("===")
}
}
})
</script>
例2:
html部分
<div id="itany">
<h1>{{count}}</h1>
</div>
js部分
<script>
new Vue({
el: "#itany",
data: {
msg: "hello vue"
},
computed: {
count: function() {
return this.msg.split(" ").reverse().join("===")
}
}
})
</script>