Detailed explanation of the use of Vue filters filters

This time I will bring you a detailed explanation of the use of Vuefiltersfilters, and what are the notes when using Vue filters. Here are actual cases, let’s take a look.

Sample code

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

<template>
 <p>
  </p>
<h1>{{date | dateFormat}}</h1> 
 
</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>

Instructions

There is no this reference in the filter. This inside the filter is undefined, so do not try to use this to refer to the variable or method of the component instance in 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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to traverse and display collection data in Angular

How to use mint-ui with vue.js Carousel component

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