過濾器
作用：讓要顯示在頁面上的內(nèi)容進行重新篩選
類型：全局過濾器??????局部過濾器
格式：
全局過濾器：
html部分
<p>{{msg|過濾器的名字}}</p>
js部分
Vue.filter('過濾器的名字'闻葵，function(){
})
new Vue({
})
局部過濾器：
html部分
<p>{{msg|過濾器的名字}}</p>
js部分
})
new Vue({
el:'',
data:{},
methods:{},
filters:{
過濾器名：function (data){
}
}
})
例子1：為小于10的數(shù)字前面加0（全局過濾器）
<div id='itany'>
<p>{{2|addZero}}</p>
</div>
<script>
Vue.filter('addZero',function(data){
if(data<10){
return '0'+data;
}else{
return data;
}
})
new Vue({
el:'#itany'
})
</script>
例子2：現(xiàn)在時間（全局過濾器/局部過濾器）
全局過濾器：
<div id="itany">
<p>現(xiàn)在時間是{{new Date()|nian}}</p>
</div>
<script>
new Vue({
el:'#itany',
filters:{
nian:function(data){
return data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+'日,星期'+data.getDay()+','+data.getHours()+'點'+data.getMinutes()+'分'+data.getSeconds()+'秒';
}
}
})
</script>
局部過濾器：
<div id="itany">
<p>現(xiàn)在時間是{{new Date()|nian}}</p>
</div>
<script>
Vue.filter("nian",function(data){
return data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+'日,星期'+data.getDay()+','+data.getHours()+'點'+data.getMinutes()+'分'+data.getSeconds()+'秒';
})
new Vue({
el:'#itany'
})
</script>
計算屬性
處理復(fù)雜的邏輯操作
練習：
<div id='itany'>
<h1>{{msg.split(' ').reverse().join('===')}}</h1>
<a href="#">{{count}}</a>
</div>
<script>
new Vue({
el:'#itany',
data:{
msg:'hello vue'
},
computed:{//計算屬性
count:function(){
return this.msg.split(' ').reverse().join('===')
}
}
})
</script>
例子：加貨計算
<div id="itany">
<button @click='add'>加貨</button>
<p>總價:￥{{sum}}</p>
</div>
<script>
new Vue({
el:'#itany',
data:{
package1:{price:2,count:3},
package2:{price:4,count:6}
},
computed:{
sum:function(){
return this.package1.price*this.package1.count+this.package2.price*this.package2.count
}
},
methods:{
add:function(){
this.package1.count++;
}
}
})
</script>