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>

相关阅读:
SpringCloud Alibaba入门之Nacos(SCA)
【AI】机器学习——线性模型（线性回归）
journal/rsyslog日志丢失问题解决
完成比写得好更重要，先完成初稿再说
机器学习---预剪枝、后剪枝（REP、CCP、PEP、）
javaScript蓝桥杯----图⽚⽔印⽣成
【k8s连载系列】2. k8s整体架构
PHP 智能物业管理系统mysql数据库web结构apache计算机软件工程网页wamp
牛客项目（五）-使用kafka实现发送系统通知
数据库-sql执行深度剖析以及redo log和undo log（下）（二）

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