一、过滤器
过滤器：对页面上的数据进行筛选和过滤
全局过滤器
html
<p>{{num|过滤器的名字}}</p>
js
Vue.filter('过滤器的名字',function(){})
局部过滤器
new Vue({
el:'#itany',
data:{},
methods:{},
filters:{
过滤器的名字：function(){}
}
})
例一：
<div id='app'>
<h1>{{num|addZero}}</h1>
</div>
<script src='js/vue.js'></script>
<script>
// Vue.filter('addZero',function(data){
// if(data<10){
// return '0'+data;
// }else{
// return data;
// }
// })
new Vue({
el:'#app',
data:{
// num: Math.floor(Math.random()*(max-min+1)+min)
num: Math.floor(Math.random()*(20-0+1)+0)
},
filters:{
addZero:function(data){
if(data<10){
return '0'+data;
}else{
return data;
}
}
}
})
</script>
例二：
<div id='app'>
<p>{{123.456|number}}</p>
</div>
<script src='js/vue.js'></script>
<script>
Vue.filter('number',function(data){
return data.toFixed(2)
})
new Vue({
el:'#app'
})
</script>
例三：
<div id='app'>
<h1>{{new Date()|date}}</h1>
</div>
<script src='js/vue.js'></script>
<script>
Vue.filter('date',function(date){
return date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+"日,星期"+date.getDay()+date.getHours()+'点'+date.getMinutes()+'分'+date.getSeconds()+'秒'
})
new Vue({
el:'#app'
})
</script>
二、计算属性
例一：
<div id='app'>
<a href="">{{revMsg}}</a>
<h1>{{msg.split(' ').reverse().join('*****')}}</h1>
<!--vue===hello-->
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#app',
data:{
msg:'hello vue'
},
methods:{},
filters:{},
computed:{
revMsg:function(){
return this.msg.split(' ').reverse().join('&&&&&&&')
}
}
})
</script>
例二：
<div id='app'>
<button @click='add'>加货</button>
<h1>{{total}}</h1>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#app',
data:{
pack1:{price:5,count:3},
pack2:{price:4,count:6}
},
computed:{
total:function(){
return this.pack1.price*this.pack1.count+this.pack2.price*this.pack2.count
}
},
methods:{
add:function(){
this.pack1.count++;
}
}
})
</script>
