About the usage of filters in Vue

This article mainly introduces the example code of Vue filter filters and the basic usage of vue filter. Friends in need can refer to

1. Sample code

Use vue single file component and use moment plug-in to format the date

<template>
 <p>
  <h1>{{date | dateFormat}}</h1> 
 </p>
</template>
<script>
 import moment from &#39;moment&#39;;
 import &#39;moment/locale/zh-cn&#39;;
 moment.locale(&#39;zh-cn&#39;);
 export default {
  data() {
   return {
    date: new Date()
   }
  },
  filters: {
   dateFormat(val) {
    return moment(val).calendar();
   }
  }
 }
</script>

2. Effect

#3. Description

There is no this reference in the filter, and this in the filter is undefined , so don’t try to use this to refer to variables or methods of the component instance within the filter.

ps: Let’s take a look at the basic usage of Vue filters

// 注册
Vue.filter('my-filter', function (value) {
 // 返回处理后的值
})
// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter')

//在mustache中使用
{{ msg | uppercase }}

or

//在标签中使用
<input type="password" v-model="psw | validate">

The above is what I compiled for everyone Yes, I hope it will be helpful to everyone in the future.

Related articles:

How to implement a table using jQuery CSS

##How to implement a comment framework using Vue

Related reasons why v4 history cannot be accessed

Why can't response.body().string() be called multiple times?

How to implement a calendar using Vue components (detailed tutorial)

Use webpack to build vue scaffolding

The above is the detailed content of About the usage of filters in Vue. For more information, please follow other related articles on the PHP Chinese website!