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

Posted 桃花剑

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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)的简单使用的主要内容,如果未能解决你的问题,请参考以下文章

vue的过滤器filter

vue 时间过滤器的简单使用

vue学习(十五) 过滤器简单实用

Vue3中删除了过滤器filter功能-如何使用computed和methods实现filter功能

Vue 过滤器filters

Vue-Methods中使用Filter