VueJS – Filters

VueJS cung cấp các filters để hỗ trợ format văn bản. Nó sử dụng qua v-bind cùng {{…}}.

Ví dụ

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <input  v-model = "name" placeholder = "Enter Name" /><br/>
         <span style = "font-size:25px;"><b>Letter count is : {{name | countletters}}</b></span>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               name : ""
            },
            filters : {
               countletters : function(value) {
                  return value.length;
               }
            }
         });
      </script>
   </body>
</html>

Trong ví dụ này, chúng ta tạo một bộ lọc filter countletters. Filter countletters sẽ đến số ký tự được nhập vào input. Để sử dụng, bạn cần ùng thuộc tính filters.

filters : {
   countletters : function(value) {
      return value.length;
   }
}

Chúng ta đã tạo một countletters return về độ dài của string nhập vào. Để hiển thị ra kết quả, chúng ta dùng

<span style = "font-size:25px;"><b>Letter count is : {{name | countletters}}</b></span>

Trong ví dụ này countletters sẽ nhận name làm làm giá trị.

Kết quả

Ta cũng có thể nối các filter với nhau:

{{ message | filterA | filterB }}

filterA sẽ nhận giá trị của message làm tham số, sau đó hàm filterB sẽ được gọi với tham số là giá trị trả về của filterA.