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

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

效果展示

相关文章
|
22天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
119 1
|
1天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
22 8
|
2天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
18 1
|
1月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
JavaScript 前端开发
重读vue电商网站41之自定义格式化时间的全局过滤器
重读vue电商网站41之自定义格式化时间的全局过滤器
123 0
重读vue电商网站41之自定义格式化时间的全局过滤器
|
前端开发 JavaScript
Vue自定义过滤器
在进行前端开发时,我们难免需要进行一些数据的特定处理,因此我们只需在main.js中定义过滤器,即可多次使用。
|
JSON JavaScript 数据格式