一、filter过滤器
过滤器：把要显示在页面上的数据进行筛选或重新操作，分为全局过滤和局部过滤
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>
二、保留两位小数练习
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>
效果图：
保留两位小数.png
三、日期时间过滤练习
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()+'点'+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()+'点'+data.getMinutes()+'分'
+data.getSeconds()+'秒'
return data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+'日,星期'+data.getDay()+data.getHours()+'点'+data.getMinutes()+'分'+data.getSeconds()+'秒'
}
}
})
</script>
四、vue.js实例的属性
（1） data 获取vue实例中的数据
（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的计算属性
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>
效果图：
计算属性.png
