美文网首页
Vue 实例属性 计算属性 过滤器——保留两位小数 过滤器—

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

作者: 纪美 | 来源:发表于2018-09-14 14:40 被阅读0次

    一、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 实例属性 计算属性 过滤器——保留两位小数 过滤器—

          本文链接:https://www.haomeiwen.com/subject/mjsogftx.html