欢迎光临
我的个人博客网站

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

效果展示

Vue过滤器(filters)的简单使用

赞(0) 打赏
未经允许不得转载:张拓的天空 » Vue过滤器(filters)的简单使用
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏