Home > Web Front-end > JS Tutorial > body text

About the usage of filters in Vue

亚连
Release: 2018-06-15 14:09:36
Original
2567 people have browsed it

This article mainly introduces the example code of Vue filter filters and the basic usage of vue filter. Friends in need can refer to

1. Sample code

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

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

2. Effect

#3. Description

There is no this reference in the filter, and this in the filter is undefined , so don’t try to use this to refer to variables or methods of the component instance within the filter.

ps: Let’s take a look at the basic usage of Vue filters

// 注册
Vue.filter(&#39;my-filter&#39;, function (value) {
 // 返回处理后的值
})
// getter,返回已注册的过滤器
var myFilter = Vue.filter(&#39;my-filter&#39;)

//在mustache中使用
{{ msg | uppercase }}
Copy after login

or

//在标签中使用
<input type="password" v-model="psw | validate">
Copy after login

The above is what I compiled for everyone Yes, I hope it will be helpful to everyone in the future.

Related articles:

How to implement a table using jQuery CSS

##How to implement a comment framework using Vue

Related reasons why v4 history cannot be accessed

Why can't response.body().string() be called multiple times?

How to implement a calendar using Vue components (detailed tutorial)

Use webpack to build vue scaffolding

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!