vue-過濾器

<template>

  <div class="hello">

    <h3>格式化人民幣</h3>

    <p>小寮頗有錢:{{money}}</p>

    <p>小寮頗有錢:{{money | moneyFormat}}</p>

    <p>這個月的工資{{page}}</p>

    <p>這個月的工資{{page| moneyFormat}}</p>

    <p>------------------</p>

    <h3>格式化日期</h3>

    <p>{{time | timeFormat}}</p>

    <p>{{time | timeFormat('YYYY-MM-DD')}}</p>

    <p>{{time | timeFormat('HH:mm:ss')}}</p>

  

   <p>------------------</p>

    <h3>全局過濾器</h3>

    <p>{{money | wholeMoneyFormat}}</p>

  </div>

</template>

<script>

import moment from 'moment';

export default {

  name: 'LkFilter',

  data() {

   return {

     money: 22322232,

     page: 233232.3232,

     time: new Date()

   }

  },

  // 局部過濾器

  filters:{

      moneyFormat(value){

          return '￥' + Number(value).toFixed(2);

      },

      timeFormat(value,format='YYYY-MM-DD HH:mm:ss'){

          return moment(value).format(format)

      }

  }

}

</script>

 <style scoped>

 

</style>

 

 

 

 

// 註冊全局過濾器

Vue.filter('wholeMoneyFormat',(value)=>{

  return '$' + Number(value).toFixed(3);

})