Explication détaillée de l'utilisation des filtres Vue Filters

Cette fois je vous apporte une explication détaillée de l'utilisation des filtres Vuefiltres, et quelles sont les précautions d'utilisation des filtres Vue Voici des cas pratiques, jetons un oeil. .

Exemple de code

À l'aide du composant de fichier unique Vue, utilisez le plug-in Moment pour formater la date

<template>
 <p>
  <h1>{{date | dateFormat}}</h1> 
 </p>
</template>
<script>
 import moment from 'moment';
 import 'moment/locale/zh-cn';
 moment.locale('zh-cn');
 export default {
  data() {
   return {
    date: new Date()
   }
  },
  filters: {
   dateFormat(val) {
    return moment(val).calendar();
   }
  }
 }
</script>

Instructions

Il n'y a pas de this référence dans le filtre. Ceci à l'intérieur du filtre n'est pas défini, alors n'essayez pas de l'utiliser pour faire référence à la variable ou à la méthode de l'instance de composant dans le filtre.

ps : Jetons un coup d'œil à l'utilisation de base des filtres Vue

// 注册
Vue.filter('my-filter', function (value) {
 // 返回处理后的值
})
// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter')
//在mustache中使用
{{ msg | uppercase }}

Ou

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment parcourir et afficher les données de collection dans Angular

Comment utiliser mint-ui avec vue Composant carrousel .js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!