Comment utiliser les filtres de la série Vue2.0 ?-js tutoriel-php.cn

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

亚连

Libérer： 2018-06-02 10:11:51

original

2499 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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