一、filter過濾器
過濾器：把要顯示在頁面上的數(shù)據(jù)進(jìn)行篩選或重新操作，分為全局過濾和局部過濾
body部分：
<div id="itany">
<p>{{6|addZero}}</p>
</div>
js部分：
<script src="js/vue.js"></script>
<script>
// 全局過濾
// Vue.filter('addZero',function(data){
// if(data<10){
// return '0'+data
// }else{
// return data
// }
//})
//局部過濾
new Vue({
el:"#itany",
data:{},
methods:{},
filters:{
addZero:function(data){
if(data<10){
return '0'+data
}else{
return data
}
}
}
})
</script>
二、保留兩位小數(shù)練習(xí)
body部分：
<div id="itany">
<p>{{78.467|number}}</p>
</div>
js部分：
<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>
效果圖：
保留兩位小數(shù).png
三、日期時(shí)間過濾練習(xí)
body部分：
<div id="itany">
<p>{{new Date()|time}}</p>
</div>
js部分：
<script src="js/vue.js"></script>
<script>
//全局過濾
//Vue.filter('time',function(data){
//return data.getFullYear()+'年'+data.getMonth()+'月'+data.getDate()+'日,星期'+data.getDay()+data.getHours()+'點(diǎn)'+data.getMinutes()+'分'+data.getSeconds()+'秒'
// })
var vm= new Vue({
el:'#itany',
// data:{
// num:new Date(),
//mon:new Date().getMonth()+1
// },
// 局部過濾
filters:{
time:function(data){
// var mon=new Date().getMonth()+1
// return data.getFullYear()+'年'+mon+'月'+data.getDate()+'日,星
期'+data.getDay()+data.getHours()+'點(diǎn)'+data.getMinutes()+'分'
+data.getSeconds()+'秒'
return data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+'日,星期'+data.getDay()+data.getHours()+'點(diǎn)'+data.getMinutes()+'分'+data.getSeconds()+'秒'
}
}
})
</script>
四、vue.js實(shí)例的屬性
（1） data 獲取vue實(shí)例中的數(shù)據(jù)
（3） refs 獲取所有帶ref屬性的元素
案例：
body部分：
<div id="itany">
{{msg}}
<h1 ref="box">你好</h1>
</div>
js部分：
<script src="./js/vue.js"></script>
<script>
var vm=new Vue({
el:"#itany",
data:{
msg:'hello vue'
},
uname:'jack',
age:18,
sex:'男'
})
// $el
console.log(vm.$el);
vm.$el.style.color='red';
// $data
console.log(vm.$data);
// $options
console.log(vm.$options);
console.log(vm.$options.uname);
console.log(vm.$options.age);
console.log(vm.$options.sex);
// $refs
console.log(vm.$refs);
console.log(vm.$refs.box);
</script>
五、vue.js的計(jì)算屬性
body部分：
<div id="itany">
<h3>{{msg}}</h3>
<a href="#">{{revemg}}</a>
</div>
js部分：
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
msg:'hello vue'//vue===hello
},
computed:{
revemg:function(){
return this.msg.split(' ').reverse().join("===")
}
}
})
</script>
效果圖：
計(jì)算屬性.png
