[vue] 过滤器使用 Vue.filter |

文章目录

• ​​过滤器​​
• ​​格式化时间显示案例计算属性实现​​
• ​​过滤器实现​​

过滤器

1.过滤器功能是对要显示的数据进行特定格式化后在显示。
2.注意的是，并没有改变原本的数据，是产生新的对应的数据。

格式化时间显示案例计算属性实现

在网页按F12，在console中输入new Date().getTime()即可获取当前的时间戳，是毫秒的时间戳。

打开BootCDN网站下载处理时间和日期的js库。

点复制链接后到浏览器地址栏粘贴。

然后按CTRL+S进行保存，此处保存到了案例文件夹下，保存格式是js格式。

详细的用法可看官网文档或者github仓库等

切换为简体中文。查看使用方法。

在代码中引入dayjs文件，并调用其中的处理函数。计算属性实现

<script type="text/javascript" src="../dayjs.min.js"></script>

<div class="root">
    <h1>显示格式化后的时间:{{fmtTime}}</h1>
</div>

Vue.config.productionTip = false
 new Vue({
     el: '.root',
     data() {
         return {
             time: 1630392758094
         }
     },
     //计算属性实现
     computed: {
         fmtTime() {
             //把上边的代码中的time时间戳传进dayjs的括号中
             //不传的话，就默认以当前代码执行的时间来处理
             return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
         }
     }
 })

过滤器实现

<script type="text/javascript" src="../dayjs.min.js"></script>

<div id="root">
  <h2>显示格式化后的时间</h2>
  <!-- 计算属性实现 -->
  <h3>现在是：{{fmtTime}}</h3>
  <!-- methods实现 -->
  <h3>现在是：{{getFmtTime()}}</h3>
  <!-- 过滤器实现 -->
  <h3>现在是：{{time | timeFormater}}</h3>
  <!-- 过滤器实现（传参） -->
  <h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
  <h3 :x="msg | mySlice">尚硅谷</h3>
</div>

//全局过滤器
Vue.filter('mySlice',function(value){
  return value.slice(0,4)
})

new Vue({
  el:'#root',
  data:{
    time:1621561377603, //时间戳
    msg:'你好，尚硅谷'
  },
  computed: {
    fmtTime(){
      return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
    }
  },
  methods: {
    getFmtTime(){
      return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
    }
  },
  //局部过滤器
  filters:{
    timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
      // console.log('@',value)
      return dayjs(value).format(str)
    }
  }
})

---

​​前端VUE3.0,DAY22，过滤器使用​​