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>

相关阅读:
无人机控制的研究现状及关键技术
WebRTC QoS方法之Pacer实现
【洛谷 P1216】[USACO1.5] [IOI1994]数字三角形 Number Triangles 题解（动态规划）
基于神经网络匹配度的模拟电路故障诊断
Centos7.9yum切换本地源、阿里yum源、网易yum源、华为yum源以及清华大学yum源自动化Shell程序
acwing算法基础之基础算法--求逆序对的数目
Spark简单介绍，Windows下安装Scala+Hadoop+Spark运行环境，集成到IDEA中
WPF/C#：如何实现拖拉元素
Perceptron, Support Vector Machine and Dual Optimization Problem (3)
二维码的前世今生与六大测试点梳理

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