How to use filter in vue

Vue filters are usually used in some common text formatting. Filters can be used in two places: double curly brace interpolation and v-bind expressions. This article introduces you to the relevant knowledge of the web front-end vue filter. Friends who are interested should take a look.

Vue filters are usually used in some common text formatting. Filters can be used in two Places: double curly brace interpolation and v-bind expressions.

For example, automatically add the Chinese money character "￥" to the price or filter the conversion between a time period or (timestamp).

In the era of javascript and jquery! The display or submission of the time period needs to be converted when displaying or when submitting, which is a bit cumbersome (I personally feel cumbersome after using Vue).

Without further ado, let’s just look at the example as follows:

The filter defined by filter can be local or global. Let’s just talk about the global one.

As usual, we should wait to register one first. Global filter keyword (filter)

The global registered filter is in the main.js file. Of course, it can also be in a separate js file

Vue.filter('dateconversion', function (value) { // 一个时间戳转正常的过滤器
 let date = new Date(value) // nuw 一个时间
 let getHours // 小时
 let getMinutes // 分
 if(date.getHours() < 10){getHours = "0"+date.getHours()}else{ getHours = date.getHours()}
// 判断小时是否小于10的补全：加0
 if(date.getMinutes() < 10){getMinutes = "0"+date.getMinutes()}else{ getMinutes = date.getMinutes()}
// 判断分是否小于10的补全：加0
 return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+ getHours +":"+ getMinutes // 返回转换后的值
})

It is very convenient to use , you can use

<template>
{{date | dateconversion}} // 使用方式，就是怎么简单，整个项目随便用
</template> 
<script>
export default {
 data () {
  return {
   date: &#39;&#39; // 后台传来的时间戳
  }
 }
}
</script>

in each component if you want to convert the display time. The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed introduction to the knowledge points about promise in js

How to solve the problem of niceScroll scroll bar misalignment in jQuery

How to implement Baidu search interface in JS

The above is the detailed content of How to use filter in vue. For more information, please follow other related articles on the PHP Chinese website!