Vue 实例属性计算属性过滤器——保留两位小数过滤器——获取时间

一、vue实例属性
1. $el 获取vue绑定的元素的，可以对元素的style进行操作 2.$ data 获取vue实例中的数据
3. $options 获取vue实例中的自定义属性 4.$ 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>

Vue 实例属性 计算属性 过滤器——保留两位小数 过滤器——获取时间

推荐阅读更多精彩内容

Vue 实例属性计算属性过滤器——保留两位小数过滤器——获取时间