全局過濾
<div class="app">
{{la|add}}
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
/*Vue.filter('過濾器的名字',函數(shù))*/
Vue.filter('add',function(data){
if(data<10){
return '0'+data
}else {
return data
}
}),
new Vue({
el:'.app',
data:{
la:Math.floor(Math.random()*20)
}
})
</script>
局部過濾
<div class="app">
{{123.456|add}}
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
/* new Vue({
el:".app",
filters:{
過濾器的名字 : 函數(shù)
}
})*/
new Vue({
el:".app",
filters:{
add:function(data){
return data.toFixed(2)
}
}
})
</script>
計算屬性
<div class="app">{{daoxu}}</div>
<!--<div class="app">{{函數(shù)名}}</div>-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
new Vue({
el:'.app',
data:{
txt:'hello vue'
},
computed:{
daoxu:function(){
return this.txt.split(' ').reverse().join('===');
// 切割 翻轉(zhuǎn) 插入
}
}
})
/* new Vue({
el:'.app',
data:{
txt:'hello vue'
},
computed:{
函數(shù)名:函數(shù)
}
})*/
</script>
