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';
                }
            }
        })

效果展示