Vue2.0シリーズでフィルターを使用するにはどうすればよいですか?-jsチュートリアル-php.cn

Vue2.0シリーズでフィルターを使用するにはどうすればよいですか?

亚连

リリース： 2018-06-02 10:11:51

オリジナル

2534 人が閲覧しました

この記事では主に Vue2.0 シリーズのフィルターの使い方を紹介しますので、参考にしてください。

vue2.0 ではフィルターが廃止され、いくつかの一般的なテキスト書式設定にはカスタムフィルターが必要です。

とても使いやすいです！！

フィルターは、二重中括弧補間と v-bind 式の 2 つの場所で使用できます。

フィルターは、パイプ文字で示される JavaScript 式の最後に追加する必要があります。

1. グローバルフィルターを登録します

注:
1. グローバルメソッド Vue.filter() はカスタムフィルターを登録し、フィルター関数は常に vue インスタンス化の前に配置する必要があります。式の値は最初のパラメーターとして使用され、引用符付きのパラメーターは文字列として扱われ、引用符のないパラメーターは式として計算されます
3。これら 2 つのフィルターの処理が競合しない限り、2 つのフィルターパラメーターを設定できます。 4. ユーザーが入力から入力したデータは、モデルに送信される前に処理することもできます

Case

<!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>

ログイン後にコピー

Case 効果:

2. インスタンス化内に登録しますフィルターは次のことができますインスタンス内では、それを使用しているインスタンス内でのみ登録されます。

上記のケースから適応:

<!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>

ログイン後にコピー

効果:

3. 共通フィルタータイムスタンプに基づいて時刻形式に変換: mm-dd 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>

ログイン後にコピー

ケースの効果:

上記をあなたのためにまとめました。将来お役に立てば幸いです。