1.過濾器
過濾器是讓要顯示在頁面上的內(nèi)容進(jìn)行重新篩選
把要顯示在頁面上的數(shù)據(jù)進(jìn)行篩選或重新操作，分為全局過濾和局部過濾
1.）全局過濾器
Vue.filter('過濾器的名字'摇天，function(){
})
html
<p>{{msg|過濾器的名字}}</p>
new Vue({
})
2.)局部過濾器
new Vue({
el:''
data:{}
methods:{},
filters:{
過濾器名：function（data）{
}
})
練習(xí)
保留兩位小數(shù)練習(xí)
<div id='itany'>
<p>{{123.41233|number}}</p>
</div>
<script src='js/vue.js'></script>
<script>
// Vue.filter("number",function(data){
// return data.toFixed(2)
// })
new Vue({
el:'#itany',
filters:{
number:function(data){
return data.toFixed(2)
}
}
})
</script>
時(shí)間過濾練習(xí)
<div id='itany'>
<p>{{new Date()|date}}</p>
</div>
<script src='js/vue.js'></script>
<script>
Vue.filter("date",function(data){
return data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+'日,星期'+data.getDay()+','+data.getHours()+'點(diǎn)'+data.getMinutes()+'分'+data.getSeconds()+'秒';
})
new Vue({
el:'#itany'
})
</script>
2.計(jì)算屬性
練習(xí)
計(jì)算屬性練習(xí)
<div id='itany'>
<h1>{{msg.split(' ').reverse().join('===')}}</h1>
<a href="#">{{count}}</a>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
msg:'hello vue'
},
computed:{//計(jì)算屬性
count:function(){ //切割 split 置換reverse 拼接符join
return this.msg.split(' ').reverse().join('===')
}
}
})
</script>
計(jì)算屬性加貨練習(xí)
<div id='itany'>
<button @click='add'>加貨</button>
<h1>{{total}}</h1>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
package1:{price:2,count:3},
package2:{price:4,count:6}
},
computed:{
total:function(){
return this.package1.price*this.package1.count+this.package2.price*this.package2.count
}
},
methods:{
add:function(){
this.package1.count++;
}
}
})
</script>
