Vue filter

In Vue, we can use filter when we want to process a value (change format, size, type, filter, etc.)

There are two ways to register a Vue filter, global or local

If you want to use a less commonly used filter within a component, you can register locally

Locally registered filters can be defined directly in the component's options

export default {
    name: 'FilterDemo',
    /* Local filter */
    filters: {
      /* Format timestamp */
      formatDate (val) {
        const date = new Date(val);
        const year = date.getFullYear();
        const month = date.getMonth() > 9 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`;
        const day = date.getDate() > 9 ? date.getDate() + 1 : `0${date.getDate() + 1}`;
        return `${year}-${month}-${day}`;
        console.log(val);
      }
    },
    data () {
      return {
 
      }
    }
    
  }

If it is a general-purpose filter, you can consider global registration. The global registration filter should define the filter globally before creating the Vue instance, which can be found in main.js

import Vue from 'vue';
Vue.filter('formatTime', function (val) {
  const date = new Date(val);
  const hour = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();
  return `${hour} : ${minutes} : ${seconds}`;
});

When you need to use filters multiple times in a project, you can create a new filter file to create the filters required by the project

// Like this
export function toThousandslsFilter(num) {
  return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
}

export function dateFilter(num) {
  // Date format conversion
}

export function lowerFilter(num) {
    // toggle case
}

// ...

// You can define all the filters frequently used in the project here

Then the global registration in main.js can be written as follows

import * as filters from './filters' // global filters

// register global utility filters.
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

After registration, it is called

Filters can be used in two places: Double curly bracket interpolation and a v-bind expression, which is supported from 2.1.0 +. Filters should be added at the end of JavaScript expressions, indicated by the "pipe" symbol:

 

<!-- In double curly brackets -->
{{ message | capitalize }}

<!-- stay `v-bind` in -->
<div v-bind:id="rawId | formatId"></div>


// The user can also process the input data before returning it to the model
 <input type="text" v-model="message | change">

Vue.filter("change", {
   read: function (value) { // Model - > view format the value before updating the element
        return value;
   },
   write: function (newVal,oldVal) { // View - > model formats values before writing back data
        console.log("newVal:"+newVal); 
        console.log("oldVal:"+oldVal);
        return newVal;
   }
});

 

Tags: Vue less Javascript

Posted on Fri, 29 Nov 2019 08:50:39 -0800 by neogeek