Comment utiliser le filtre dans vue

Les filtres Vue sont généralement utilisés dans certains formats de texte courants. Les filtres peuvent être utilisés à deux endroits : l'interpolation à double accolade et les expressions de liaison en V. Cet article vous présente les connaissances pertinentes sur le filtre de vue frontal Web. Les amis intéressés devraient y jeter un œil ensemble

Les filtres Vue sont généralement utilisés dans certains formats de texte courants. Les filtres peuvent être utilisés à deux endroits. : interpolation double accolade et expressions v-bind.

Par exemple, ajoutez automatiquement le caractère monétaire chinois "￥" au prix ou filtrez la conversion entre une période de temps ou (horodatage).

À l'ère du javascript et du jquery ! L'affichage ou la soumission de la période doit être converti lors de l'affichage ou de la soumission, ce qui est un peu fastidieux (je me sens personnellement encombrant après avoir utilisé Vue).

Sans plus attendre, regardons simplement l'exemple suivant :

Le filtre défini par filter peut être local ou global Parlons simplement du global ci-dessous. Comme d'habitude, je dois encore attendre et en enregistrer un d'abord. Mot-clé de filtre global (filtre)

Le filtre global enregistré se trouve dans le fichier main.js. Bien sûr, il peut également être utilisé dans un fichier js séparé.

Il est facile à utiliser. C'est pratique. Vous pouvez l'utiliser dans divers composants si vous souhaitez convertir le temps d'affichage.

Vue.filter('dateconversion', function (value) { // 一个时间戳转正常的过滤器
 let date = new Date(value) // nuw 一个时间
 let getHours // 小时
 let getMinutes // 分
 if(date.getHours() < 10){getHours = "0"+date.getHours()}else{ getHours = date.getHours()}
// 判断小时是否小于10的补全：加0
 if(date.getMinutes() < 10){getMinutes = "0"+date.getMinutes()}else{ getMinutes = date.getMinutes()}
// 判断分是否小于10的补全：加0
 return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+ getHours +":"+ getMinutes // 返回转换后的值
})

Ce qui précède est ce que j'ai compilé. pour tout le monde. J’espère que cela sera utile à tout le monde à l’avenir.

<template>
{{date | dateconversion}} // 使用方式，就是怎么简单，整个项目随便用
</template> 
<script>
export default {
 data () {
  return {
   date: &#39;&#39; // 后台传来的时间戳
  }
 }
}
</script>

Articles connexes :

Introduction détaillée aux points de connaissance sur les promesses en js

Comment résoudre le problème du désalignement de la barre de défilement niceScroll dans jQuery

Comment implémenter l'interface de recherche Baidu dans 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!