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

1、Vue过滤器的简单介绍

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

  
{{ message | capitalize }}

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

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

Css部分：

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

html部分

   

        

            
ID
            
姓名
            
年龄
                           
            
            

                
{{item.id}}
                
{{item.name}}
                
{{item.age}}
            
        
    

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

效果展示