vue中的fileter 过滤器

128 阅读1分钟

过滤器可用在双花括号插值表达式和v-bind 1.在组件定义过滤器

filters: { capitalize: function (value) 
{ if (!value) return '' 
value = value.toString() 
return value.charAt(0).toUpperCase() + value.slice(1) } }

实例:

<template>
 <div>
  御剑乘风来,除魔天地间!{{msg||upper}}
 </div>
</template>
           
<script>
export default{
    name:'',
    data () {
   
        return {
             msg:'this is a message',
     
        filters:{
          upper(value){
// 获取字符串
      if(!value){
        // 如果为空返回
     return  
     } 
    //  获取字符串
     value=value.toStrng() 
      return value.charAt(0).toUpperCase()+value.slice(1);
      //charAt(i)从0开始数第i个字符   splice(i)从i开始数第i个字符
      
      
}
        }

        }
    },
    created () {
    },
    computed:{
    },
    methods:{
     
    }
}
</script>
<style lang='less'  scoped>
 
</style>

2.在mian.js中全局定义过滤器

Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) })
new Vue({ // ... })

实例: main.js中

vue.fliter('forMat',(data)=>{
var t=-new Date(data)
var yy=t.getFullyear()
var  mm=(t.getFullMonth()+1).toString().padstart(2,0)
var  dd=t.getDate().toString().padStart(2,0)
return   `${yy}--${mm}--{dd}`
})
组件在插槽中使用
{{ scoped.row.timeOfEntry | forMat("YYYY-MM-DD") }}

获取特定时间的格式

new date()
now.getFullYear()  // 获取完整的年份 2019
now.getMonth()+1   //获取当前月份(从0-11,0代表1月)
now.getDate()    //获取当前日(1-31)
now.getDay()     //获取当前星期X(0-6,0代表星期天)
now.getTime()   //获取当前时间(从1970.1.1开始的毫秒数)
now.getHours()     //获取当前小时数(0-23)
now.getMinutes()    //获取当前分钟数(0-59)
now.getSeconds()   //获取当前秒数(0-59)
now.toLocaleDateString()  //获取当前日期  "2022/4/6"