Advantages and usage scenarios of Vue filters

1. Advantages:

  • filtersDoes not modify the data, just changes the output that the user sees.

(Computed attributes, methods (methods) deal with the output display of data formats by modifying data).

2. Usage Scenarios:

  • Cases where we need to format data, such as when we need to deal with the output/display of data formats such as time, price, etc.
  • Let’s say the back end returns you oneDate string for year month day, the front end needs to be displayed asHow many days agoData format, at this point you can use oursflitersFilters to process data.

How to use Vue filters (VueUse “filter” infilters)

Filter used in the interpolation expression {{}} and v – bind expression, and then by the pipeline operator instructions “|”.

A filter is a function that always takes the value in an expression as the first argument to the function.

Definition of filter

Local filter:Define filters within the currently used component. We use filters to modify the format of the data we want to output.

The following is an example:

<template> <div> <ul v-for="item in products" :key="item.id" class="product-ul"> <li> {{item. Price | filterPrice}} < / li > < li > product details: < a v - bind: href = "item. The detail | filterURL" > view details < / a > < / li > < / ul > < / div > < / template > < script > export default {data () { Return {products: [{name: 'CPU ', price: 25, detail:' CPU '}, {name: 'disk ', price: '', detail: 'ying' } ] } }, filters: { filterPrice (price) { return price ? ('$' + price) : '--' }, filterURL (val) { return val ? ('https://baidu.com/' + val) : '#' } } } </script> <style lang="scss"> .product-ul{ border: 1px solid #eee; width: 500px; li{ display: inline-block; padding: 10px; margin-bottom: 15px; } } </style>Copy the code

②. Global filter:Note that to use a global filter, you must use theVueBefore the instance.

An example is as follows (the above filter for handling prices is written as follows) :

Vue.filter("filterPrice".function (price) {
  returnprice? ("$" + price):The '-'
});

new Vue({
 / /...
})
Copy the code

For example, change the above local (local) filter to a global filter:

Add the following two filters to main.js in the project’s SRC folder. Note that they are written in new Vue(…). before

Vue.filter('filterPrice'.function (price) {
  return price ? ('$' + price) : The '-'
})

Vue.filter('filterURL'.function(val){
  return val ? ('https://baidu.com/' + val) : The '#'
}) 

Copy the code

Can be used directly in the componentmain.jsFilters defined in:

<template> <div> <ul v-for="item in products" :key="item.id" class="product-ul"> <li> {{item. Price | filterPrice}} < / li > < li > product details: < a: href = "item. The detail | filterURL" > view details < / a > < / li > < / ul > < / div > < / template > < script > export default {data () {return { Products: [{name: 'CPU ', price: 25, detail:' CPU '}, {name: 'disk ', price: '', detail: 'ying' } ] } } } </script> <style lang="scss"> .product-ul{ border: 1px solid #eee; width: 500px; li{ display: inline-block; padding: 10px; margin-bottom: 15px; } } </style>Copy the code

4. Filter parameters

A filter is a function that always takes the value in the expression as the first argument to the function.

Additional arguments can be passed to the filter function.

For example, the global filter is written as follows: vue.filter ('filterPrice'.function (price, param) {
  return price ? (param + price) : The '-'}) on expression using the interpolation filter filterPrice, when using, incoming parameters $, at and above the same effect: {{price | filterPrice ('$'}} price is automatically taken as the first argument to the filter function filterPrice'$'As its second argument.Copy the code

③ “filter” can be used in series.

 {{ data | filterA | filterB }}
Copy the code

When used in series, the result of the first filter is passed as a parameter to the second filter, and so on.

For example, the global filter is written as follows: vue.filter ('filterPriceA'.function (price) {
  return price || false
})

Vue.filter('filterPriceB'.function (price) {
  return  price ? ( '$'+ price) : The '-'}) use the filters filterPriceA and filterPriceB in the interpolation to achieve the same effect as filterPrice: {{price | filterPriceA | filterPriceB}} here the price as the parameters of the filter function filterPriceA automatically, FilterPriceA completes its execution and passes its return to the filterPriceB filter. And returns the final result to the interpolation.Copy the code

Example of using filters in el-table

Note:

  1. Where conversion formats are required, this is usedTableCustom column templates for
  2. When writing a custom column template,<template>In theslot-scope="scope"Indispensable, in double parenthesesscope.row.createTimeRepresents the object of the current rowcreateTimeProperty value.
  3. Dayjs is a plugin for processing time. The project has been installed with YARN Add dayjs.
<template> <div> <el-table :data="myArray" border style="width:401px;" >< el-table-column width="200" align="center" prop="title" label=" title" ></el-table-column> <el-table-column width="200" Align = "center" prop = "createTime" label = "published in" > < template slot - scope = "scope" > {{scope. Row. CreateTime | convertDate}} days ago </template> </el-table-column> </el-table> <! - here {{createTime | convertDate}} is equivalent to, createTime as a parameter to the function in the filter filters convertDate; </div> </template> <script> // dayjs is a plugin for handling time. Yarn Add dayjs has been installed in the project. For details about how to use dayjs, see: https://blog.csdn.net/ddx2019/article/details/102535557 import dayjs from 'dayjs' export default { data () { return { MyArray: [{2019-05-05 09:48:33', title: '2019-05-05 09:48:33'}, {2019-05-05 09:48:33', title: 'article -2'}]}}, filters: {convertDate (date) {// This is createTime. Const curDate = dayjs(new Date()) // The current time to dayjs object const createDate = dayjs(Date) // createTime to dayJS time object const DiffDay = curdate. diff(createDate, 'day') // Dayjs' diff method calculates the time difference, 'day', the number of days between returns diffDay}}} </script>Copy the code

For more usage, please refer to vue official website

Reference blog link: juejin.cn/post/684490…