一 过滤器 对页面上的数据进行筛选和过滤
全局过滤器
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>
new Vue({
el:'#app',
data:{
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'>
<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:{
otal:function(){
return this.pack1.price*this.pack1.count+this.pack2.price*this.pack2.count
}
},
methods:{
add:function(){
this.pack1.count++;
}
}
})
</script>