1.过滤器：让要显示在页面上的内容进行重新筛选
2.过滤器分为：
全局过滤器：
<body>
<div id="itany">
<p>{{5|zore}}</p>
</div>
<script src="js/vue.js"></script>
<script>
Vue.filter("zore",function(data){
if(data<10){
return "0"+data;
}else{
return data;
}
})
new Vue({
el:"#itany"
})
</script>
</body>
局部过滤器：
<body>
<div id="itany">
<p>{{5|zore}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
filters:{
zore:function(data){
if(data<10){
return "0"+data;
}else{
return data;
}
}
}
})
</script>
</body>
练习：
1.保留两位小数
<body>
<div class="itany">
<p>{{129.3626554|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>
</body>
2.获取当前时间：
<body>
<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()+'点'+data.getMinutes()+'分'+data.getSeconds()+'秒';
// })
new Vue({
el:'#itany',
filters:{
date:function(data){
return data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+'日,星期'+data.getDay()+','+data.getHours()+'点'+data.getMinutes()+'分'+data.getSeconds()+'秒';
}
}
})
</script>
</body>
计算属性：
<body>
<div class="itany">
<p>{{count}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".itany",
data:{
msg:"hello vue"
},
computed:{
count:function(){
return this.msg.split(" ").reverse().join("===")
}
}
})
</script>
</body>
1.计算属性求和：
<body>
<div class="itany">
<button v-on:click="btn">加货</button>
<h1>总价为:{{count}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".itany",
data:{
pack:{price:8,count:6},
pack1:{price:4,count:8}
},
computed:{
count:function(){
return this.pack.price*this.pack.count+this.pack1.price*this.pack1.count
}
},
methods:{
btn:function(){
return this.pack.count++
}
}
})
</script>
</body>
网友评论