Vue 实例属性 计算属性 过滤器——保留两位小数 过滤器—
2018-09-14 本文已影响0人
纪美
一、vue实例属性
1.data 获取vue实例中的数据
3.refs 获取所有带ref属性的元素
二、计算属性
对于比较复杂的逻辑运算,都应该使用计算属性
例:
<div class="itany">
<p>{{mag}}</p>
<h1>{{list}}</h1>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:".itany",
data:{
mag:'hello Vue'
},
computed:{
list:function(){
return this.mag.split(' ').reverse().join('===');
}
}
})
</script>
三、过滤器——保留两位小数
<div class="itany">
<p>{{1381.322165|addZero}}</p>
</div>
<script src="vue.js"></script>
<script>
// 全局
Vue.filter('addZero',function(data){
return data.toFixed(2);
})
new Vue({
el:'.itany'
// 局部
// filters:{
// addZero:function(data){
// return data.toFixed(2);
// }
// }
})
四、过滤器——获取时间
<div class="itany">
<p>{{new Date()|houers}}</p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'.itany',
filters:{
houers:function(data){
return data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+'号,星期'+data.getDay()+";"+data.getHours()+'点'+data.getMinutes()+'分'+data.getSeconds()+'秒';
}
}
})
</script>