一.過濾器
過濾器分為局部過濾器和全局過濾器
1.局部過濾器
格式
<div class='glq'>
<p>{{變量|過濾器名字}}</p> （變量和過濾器名字都是由自己定）
</div>
<script src='js鏈接'></script>
<script>
Vue filter('過濾器名字'，function(data){
在這里要用return索引返回值
});
new Vue({
el:'glq'
})
</script>
2.全局過濾器
格式
<div class='glq'>
<p>{{變量|過濾器名字}}</p>
</div>
<script src='js鏈接'></script>
<script>
new Vue({
el:'glq',
filters:{
變量:function(data){
在這里要用return索引返回值
}
}
})
</script>
練習
1.當數(shù)字為小于10的一位數(shù)時砸琅，在前面加個 “0”
<div class='glq'>
<p>{{5|fun}}</p>
</div>
<script src='js鏈接'></script>
1）局部過濾
<script>
el:'glq',
Vue.filter(‘fun’,function(data){
if(data<10){
return '0'+data
}else{
return data
}
}
new Vue({
el:'.glq',
})
</script>
2）全局過濾
<script>
new Vue({
el:'.glq',
filters:{
fun:function(data){
if(data<10){
return '0'+data
}else{
return data
}
}
}
})
</script>
2.小數(shù)點后留兩位數(shù)
<div class='glq'>
<p>{{1.234|fun}}</p>
</div>
<script src='js鏈接'></script>
局部過濾
<script>
el:'.glq',
Vue.filter('fun',function(data){
return data.toFixed(2)
})
</script>
全局過濾
<script>
el:'.glq',
filters:{
fun:function(data){
return data.toFixed(2)
}
}
</script>
3.時間
<div class='glq'>
<p>{{new Date()|fun}}</p>
</div>
<script src='js鏈接'></script>
局部過濾
<script>
el:'.glq',
Vue.filter('fun',function(data){
var date=new Date();
var year=date.getFullYear();
var mon=date.getMonth()+1;
var tian=date.getDate();
var day=date.getDay();
var hours=date.getHours();
var min=date.getMinutes();
var sec=date.getSeconds();
return '現(xiàn)在時間是'+year+'年'+mon+'月'+tian+'日,星期'+day+','+hours+'點'+min+'分'+sec+'秒'
})
</script>
全局過濾
<script>
el:'.glq',
filters:{
fun:function(data){
var date=new Date();
var year=date.getFullYear();
var mon=date.getMonth()+1;
var tian=date.getDate();
var day=date.getDay();
var hours=date.getHours();
var min=date.getMinutes();
var sec=date.getSeconds();
return '現(xiàn)在時間是'+year+'年'+mon+'月'+tian+'日,星期'+day+','+hours+'點'+min+'分'+sec+'秒'
}
}
</script>
二.計算屬性
通過使用與data吵取，methods同級的computed完成一些重復繁瑣的計算
例如：將Hello Vue轉化成 Vue===Hello
<div class='nr'>
{{fun}}
</div>
<script src='js鏈接'></script>
<script>
new Vue({
el:'.nr',
data:{
msg:'Hello Vue'
}
computed:{
fun:function(){
return this.msg.split(' ').reverse().join('===');
(split是切割的意思鱼炒，引號中間的空格表示，每個空格為一個切割單位)
（reverse是反轉的意思，就是將切割開的元素順序顛倒）
（jion是連接的意思踩衩，引號中間的符號是在切割開的地方要添加的元素）
}
}
})
</script>
練習題：求和
<div class='nr'>
<button v-on:click="jia">加貨</button>
<p>{{fun}}</p>
</div>
<script src='js鏈接'></script>
<script>
new Vue({
el:'.nr',
data:{
arr:{price:2,count:3},
add:{price:4,count:6}
},
computed:{ (求和)
fun:function(){
return this.arr.price*this.arr.count+this.add.price*this.add.count
}
}
methods:{ （arr.count每加一個的和）
jia:function(){
this.arr.count++
}
}
})
</script>
