过滤器

全局过滤器

<div id="app">
       <p>{{obj|addzero}}</p>
</div>
<script>
Vue.filter('addzero',function(data){
        if(data<10){
        return "0"+data;
        }else{
        return data;
        }
})
new Vue({
        el:"#app",
        data:{
            obj:Math.floor(Math.random()*(20-0+1)+0)
        }
})
</script>

局部过滤器

<script>
    new Vue({
         el:"#app",
          data:{
                obj:Math.floor(Math.random()*(20-0+1)+0)
          },
          filters:{
                addzero:function(data){
                      if(data<10){
                              return "0"+data;
                       }else{
                              return data;
                       }
                 }
          }
    })
</script>

保留小数

局部:

div id='app'>
        <p>{{123.123|data}}</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            filters:{
                data:function(data){ 
                    return data.toFixed(2)
                }
            }
        })
    </script>

全局:

<div id='app'>
       <p>{{123.456|number}}</p>
   </div>
    <script src='js/vue.js'></script>
    <script>
      Vue.filter('number',function(data){
          return data.toFixed(2)
      })
      new Vue({
          el:'#app'
      })
    </script>

过滤器获取时间

<div id="app">
        <p>{{new Date()|date}}</p>
    </div>
    <script>
       Vue.filter('date',function(date){
            return date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日,星期'+date.getDay()+','+date.getHours()+'点,'+date.getMinutes()+'分'+date.getSeconds()+'秒'
       })
        new Vue({
             el:"#app"
        })              
    </script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 突然发现,准备考试的知识都是有关联的。一直遗憾那次银监会面试差零点几分的落选,想再努力一次。本来想把会计备考放一放...
    天边_8854阅读 104评论 0 0
  • 一切早有暗示 一切自有天意
    咏絮公子阅读 181评论 0 0
  • 苍云溟漠朔风吹 百年幽梦自此回 铁血忠魂金销尽 国路迢遥待鹰飞 人心无地江河下 霜胆有形玉楼隳 长天衰草灵怨野 荒...
    不正经先生L阅读 278评论 0 7
  • Amos_gouge阅读 114评论 0 0