Maison >interface Web >js tutoriel >Comment utiliser les filtres de la série Vue2.0 ?

Comment utiliser les filtres de la série Vue2.0 ?

亚连original: 2018-06-02 10:11:512559parcourir

Cet article présente principalement l'utilisation des filtres de la série Vue2.0. Maintenant, je le partage avec vous et le donne comme référence.

vue2.0 a abandonné les filtres et nécessite des filtres personnalisés pour certains formats de texte courants.

C'est super facile à utiliser ! !

Les filtres peuvent être utilisés à deux endroits : l'interpolation à double accolade et les expressions v-bind.

Des filtres doivent être ajoutés à la fin des expressions JavaScript, indiqués par le caractère barre verticale.

1. Enregistrez un filtre global

Remarques :
1. Enregistrez un filtre personnalisé avec la méthode globale Vue.filter(). filter, doit être placé avant l'instanciation de la vue
2. La fonction de filtre prend toujours la valeur de l'expression comme premier paramètre. Les paramètres avec guillemets sont traités comme des chaînes, tandis que les paramètres sans guillemets sont calculés selon l'expression
3. . Deux paramètres de filtre peuvent être définis, à condition que le traitement des deux filtres n'entre pas en conflit
4. Les données saisies par l'utilisateur à partir de l'entrée peuvent également être traitées avant d'être transmises au modèle

. Cas

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>过滤器</title>
</head>
<body>

<p id="app">
  <!-- 首字符串大写 -->
  <p>首字母大写过滤器：{{str | upcase}}</p>
  <!-- 给过滤器传入参数 -->
  <p>求和过滤器：{{message | sum(10,20)}}</p> 
</p>

<script type="text/javascript" src=&#39;https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js&#39;></script>
<script type="text/javascript">
    //全局方法 Vue.filter()注册一个自定义过滤器,必须放在Vue实例化前面
    // 注册一个首字母大写的过滤器
    Vue.filter("upcase", function(value) { 
        if (!value) return &#39;&#39;
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    });
    // 全局注册一个求和过滤器
    Vue.filter(&#39;sum&#39;, function (value, a, b) {
      return value + a + b;
    });

    var demo = new Vue({
      el: "#app",
      data: {
        str:&#39;hello&#39;,
        message:12
      }
    });
</script>
</body>
</html>

Effet de cas :

2. Enregistrez-vous dans l'instanciation

Les filtres peuvent également être enregistrés dans une instance, uniquement dans l'instance qui l'utilise.

Adapté du cas ci-dessus :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

<p id="app">
  <!-- 首字符串大写 -->
  <p>首字母大写过滤器：{{str | upcase}}</p>
  <!-- 给过滤器传入参数 -->
  <p>求和过滤器：{{message | sum(10,20)}}</p> 
</p>

<script type="text/javascript" src=&#39;https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js&#39;></script>
<script type="text/javascript">
    var demo = new Vue({
      el: "#app",
      data: {
        str:&#39;hello&#39;,
        message:12
      },
      filters: {
        upcase:function(value){
          if (!value) return &#39;&#39;
          value = value.toString()
          return value.charAt(0).toUpperCase() + value.slice(1)
        },
        sum:function(value, a, b){
          return value + a + b;
        }
      }
    });

</script>
</body>
</html>

Effet :

3. >

Convertir au format d'heure en fonction de l'horodatage : mm-jj hh:tt

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

<p id="app">
  <!-- 将时间戳转化为时间 -->
  <h1>根据时间戳转化为时间：{{ str | formateTime}}</h1>
</p>

<script type="text/javascript" src=&#39;https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js&#39;></script>
<script type="text/javascript">
    var demo = new Vue({
      el: "#app",
      data: {
        str:1517568434324,
      },
      filters: {
        formateTime:function(nS){
          return ((new Date(nS).getMonth()+1)<10?&#39;0&#39;+(new Date(nS).getMonth()+1):(new Date(nS).getMonth()+1)) + &#39;-&#39; + (new Date(nS).getDate()<10?&#39;0&#39;+new Date(nS).getDate():new Date(nS).getDate()) + &#39; &#39; + (new Date(nS).getHours()<10?&#39;0&#39;+new Date(nS).getHours():new Date(nS).getHours()) + &#39;:&#39; + (new Date(nS).getMinutes()<10?&#39;0&#39;+new Date(nS).getMinutes():new Date(nS).getMinutes())
        }
      }
    });

</script>
</body>
</html>

Effet de casse :

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.

Articles associés :

À propos de la façon d'insérer des paramètres variables dans les attributs de la balise vue.js (tutoriel détaillé)

À propos de Comment fermer un composant en cliquant à l'extérieur du composant dans Vue (tutoriel détaillé)

Détails pour résoudre le problème de l'écran blanc sur la page d'accueil une fois la construction de Vue emballée (tutoriel détaillé)

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser vue pour déterminer la classe de domArticle suivant：Comment utiliser vue pour déterminer la classe de dom

Articles Liés

Voir plus