Vue过滤器（filters）的简单使用

1、Vue过滤器的简单介绍

  Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示： 

  <!-- 在双花括号中 --> {{ message | capitalize }}  <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div> 

2、过滤器的简单运用（数据过滤）

  把数据动态渲染到页面后，通过过滤器把年龄大于等于18的设置为绿色，否则设置成红色 

Css部分：

       .green{             background-color: green;         }         .red{             background-color: red;         } 

html部分

   <div id="app">         <table border="1" style="text-align: center;border-spacing: 0px;width: 500px;margin: 100px auto;">             <th>ID</th>             <th>姓名</th>             <th>年龄</th>                                        <!-- 函数adult_filterd 的形参就是竖线前面的 item.age -->             <tr v-for="item in msg" :key="item.id" :class="item.age | adult_filter">                 <td>{{item.id}}</td>                 <td>{{item.name}}</td>                 <td>{{item.age}}</td>             </tr>         </table>     </div> 

javascript部分

    let app = new Vue({             el:'#app',             data:{                 msg:[                     {                         id:1,                         name:'Alec',                         age:30                     },                     {                         id:2,                         name:'Jack',                         age:19                     },                     {                         id:3,                         name:'Alex',                         age:17                     },                     {                         id:4,                         name:'John',                         age:16                     }                 ],             },             //                // 过滤器             //             filters:{                        adult_filter(data){                     // 形参data就是竖线前面的数据                     //如果年龄大于18的就返回 ‘green’ ,否则返回‘red’                     return data>=18?'green':'red';                 }             }         }) 

效果展示