Vue过滤器


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div id="app">
        <ul>
            <li v-for="user in userList">
                {{user.id}}==>{{user.name}}==>{{user.gender==1?"男":"女"}}==>{{user.gender | genderFilter}}==>{{user.gender | gFilter}}
            li>
        ul>
    div>
    <script src="/../node_modules/vue/dist/vue.js">script>
    <script>
        Vue.filter("gFilter",function(val){
            if(val==1){
                        return "男";
                    }
                    else{
                        return "女";
                    } 
        })
 
        let vm=new Vue({
            el:"#app",
            data:{
                userList:[{id:1,name:"jack",gender:1},{id:2,name:"peter",gender:0}]
            },
            filters:{
                genderFilter(val){
                    if(val==1){
                        return "男";
                    }
                    else{
                        return "女";
                    } 
                }
            }
        })
    script>
body>
html>

相关阅读:
计算机网络-数据交换技术
Spring事务传播性
优化|优化处理可再生希尔伯特核空间的非参数回归中的协变量偏移
实现不同局域网文件共享的解决方案：使用Python自带HTTP服务和端口映射
基于springboot床上家纺用品网上销售系统的设计与实现-计算机毕业设计源码+LW文档
蓝/绿部署 VS 金丝雀部署
行列式某一行所有元素除(i, j)元外都为0，则行列式等于(i, j)元与(i, j)元的代数余子式的乘积
基于STM32设计的智能货架(华为云IOT)(225)
【Android学习】自定义文本框和输入监听
URL编码解码详解

原文地址：https://blog.csdn.net/qq_55278081/article/details/126366507