Shulou(Shulou.com)05/31 Report--

This article introduces the knowledge of "what is the implementation and application scenario of Vue filter". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. A brief introduction

Vue.js allows you to customize the filter (filter), which can be used for some common text formatting.

Filters can be used in two places: double curly braces interpolation and v-bind expressions (the latter is supported from 2.1.0 +).

The filter should be added at the end of the JavaScript expression, indicated by the "pipe" symbol:

{{message | filter}}

The filter function always takes the value of the expression as the first parameter.

In the above example, the filter filter function will receive the value of message as the first argument.

1.1 filters can be connected in series

{{message | filterA | filterB}}

In this example, filterA is defined as a filter function that receives a single parameter, and the value of the expression message is passed into the function as an argument. Then continue to call the filter function filterB, which is also defined to receive a single parameter, passing the result of filterA to filterB.

1.2 the filter is a JavaScript function that can receive parameters

{{message | filterA ('arg1', arg2)}}

FilterA is defined as a filter function that takes three parameters. Where the value of message is the first parameter, the normal string 'arg1' is the second parameter, and the value of the expression arg2 is the third parameter.

2. Define global filter in vue-cli

Syntax: Vue.filter (filterName, () = > {return / / data processing result})

Eg:

{{userName | addName}} / / Parameter 1: the name of the filter, that is, the handler after the pipe character / / Parameter 2: processing function The parameters of the processing function are the same as above Vue.filter ("addName", (value) = > {return "my name is" + value}) let vm = new Vue ({el: "# app", data: {userName: "Xiao Ming"}})

2.1 actual development and use

Global filters are often decorated with data, and usually we extract the processing functions and put them in a .js file.

/ / filter.js file let filterPrice = (value) = > {return 'received' + value + 'yuan'} let filterDate = (value) = > {return value + 'days'} export default {filterPrice,filterDate}

Import the above filter.js file in main.js, or import filter.js in any component, but for a global filter, it is best to define it in main.js and import an object, so use the Object.keys () method to get an array of key, traverse the data, and let key be the name of the global filter, followed by the corresponding handler function for key This makes it possible to use global filters in any component:

/ / main.js / / below are two import methods. The first is recommended: import * as filters from'. / utils/filter/filter'// import {filterPrice,filterDate} from'. / utils/filter/filter' console.log (filters) Object.keys (filters.default). ForEach ((item) = > {Vue.filter (item,filters.default [item])}) new Vue ({router, store, render: h = > h (App),}). $mount ('# app')

3. Use a global filter in the component: / / test.vue {{filterCount | filterPrice}} {{filterCount | filterDate}} export default {data () {return {filterCount:1500}},} 3. Define a local filter in vue-cli / / test.vue {{filterCount | filterPrice}} {{filterCount | filterDate}} export default {data () {return {filterCount:1500}} } 4. Common usage scenarios

4.1 format date (time)

Scene 1: time of back-end transmission: 2019-11-19T04:32:46Z

Install moment.js

/ / main.jsimport moment from 'moment'// defines a global filter-- time formatted Vue.filter (' format',function (val,arg) {if (! val) return Val = val.toString () return moment (val) .format (arg)}) / / test.vue {{time | format ('YYYY-MM-DD HH:MM:SS')}} export default {data () {return {time:'2019-11-19T04VV 32V 46Z'} "what is the implementation and application scenario of Vue filter". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.