Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use the filters filter in VUE". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use the filters filter in VUE.

Preface

Vue.js allows us to customize filters that can be used for some common text formatting. Filters can be used in two places: double curly braces ({undefined {}}) 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 | capitalize}} I. Global filter

Defining a global filter is easy, and you only need to export a method.

It is easy to use, just introduce this filter globally in the entry file, using Vue.filter (key, value).

For example, if the timestamp returned by the Java backend is accurate to seconds, and the timestamp in JS is expressed in milliseconds, you can define a global filter to convert the timestamp:

/ / main.jsimport Vue from 'vue'Vue.filter (' millisecond', (value) = > {if (! value) return''value = value.toString () return value.charAt (0). ToUpperCase () + value.slice (1)})

For components that need to be used, use:

{{1516101106 | millisecond}} 1. Single mount of global filter / * dateTmp: value to be filtered * fmtTmp: passed parameter You can receive multiple parameters * / {1639998858000 | dateFormat ("yyyy/MM/dd HH:mm:ss")} Vue.filter ('dateFormat', function (dateTmp, fmtTmp) {let fmt = fmtTmp let date = dateTmp if (! fmt) {fmt =' yyyy.MM.dd'} if (! (date instanceof Date)) {date = new Date (date)} let o = {'Manners: date.getMonth () + 1 / / month's' hours: date.getDate (), / / Day 'hacks: date.getHours ()% 12 = = 0? 12: date.getHours ()% 12, / / hrs' hats: date.getHours (), / / hrs' hacks: date.getMinutes (), / / minutes' hats: date.getSeconds () / / second: Math.floor ((date.getMonth () + 3) / 3), / / quarter: date.getMilliseconds: date.getMilliseconds () / millisecond} let week = {'0mm:' day', '1mm:' one','2':'2','3':'3','4':'4', '5pm:' five' If (/ (y +) / .test (fmt)) {fmt = fmt.replace (RegExp.$1, (date.getFullYear () +'). Substr (4-RegExp.$1.length))} if (/ (E+) / .test (fmt)) {fmt = fmt.replace (RegExp.$1, ((RegExp.$1.length > 1)? (RegExp.$1.length > 2? Week: week):') + week [date.getDay () +'])} for (var k in o) {if (new RegExp ('('+ k +')') .test (fmt)) {fmt = fmt.replace (RegExp.$1, (RegExp.$1.length = = 1)? (o [k]): (('00' + o [k]). Substr ((' + o [k]) .length)}} return fmt}); 2. Bulk mount of global filter / / definition method / / filters.jsexport function slice (temp,num) {return temp.slice (0jinnum);} / mount / / main.jsimport * as filters from'@ / assets/js/filters' Object.keys (filters) .forEach (key = > {Vue.filter (key, filters [key]);}); / / call {{'123456' | slice (4)}} II. Component filter

Component filters are simpler, as long as you define filters in the corresponding component, but only for this component.

For example, define a filter with uppercase initials:

/ / define method export default {filters: {capitalize: function (value) {if (! value) return''value = value.toString () return value.charAt (0). ToUpperCase () + value.slice (1)}

Example:

{{msg | setSize}} export default {data () {return {msg: "I want to be filtered",}; filters: {setSize (value) {if (value.length > 4) {return value.splice (0,4) + "...";} else {return value;}},},} Thank you for reading, the above is the content of "how to use the filters filter in VUE". After the study of this article, I believe you have a deeper understanding of how to use the filters filter in VUE, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.