随笔- 737 文章- 0 评论- 1 阅读- 87891

53、过滤器filters

1、局部过滤器filters

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue过滤器</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{gender | genderFilter}}  <!--竖杠代表管道符，将gender值传给过滤器genderFilter-->>
    </div>
</body>
</html>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            gender: 1
        },
        methods:{
 
        },
        filters:{
            genderFilter(value){
                if(value == 1){
                    return "男"
                }else if(value == 0){
                    return "女"
                }
            }
        }
    })
</script>

2、全局过滤器Vue.filter

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue过滤器</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{gender | genderFilter}}  <!--竖杠代表管道符，将gender值传给过滤器genderFilter-->
    </div>
</body>
</html>
<script>
    // 全局过滤器
    Vue.filter("genderFilter", function(value){
        if(value == 1){
            return "男"
        }else{
            return "女"
        }
    })
 
    var app = new Vue({
        el: "#app",
        data:{
            gender: 1
        },
        methods:{
 
        }
    })
</script>

posted @ 2023-01-04 22:18 不是孩子了阅读(34) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 52、监听器watch

· 45、商品服务---品牌管理---Vue和Elementui的一些理解

· Vue 过滤器

· Vue中filter过滤器的使用方法

阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 零经验选手，Compose 一天开发一款小游戏！
· 因为Apifox不支持离线，我果断选择了Apipost！
· 通过 API 将Deepseek响应流式内容输出到前端

公告

昵称：不是孩子了
园龄： 3年7个月
粉丝： 5
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

阅读排行榜

评论排行榜

1. mybatis一次执行多条SQL语句(1)

发量不减

53、过滤器filters

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Vue过滤器</title>
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
	<div id="app">
	{{gender \| genderFilter}} <!--竖杠代表管道符，将gender值传给过滤器genderFilter-->>
	</div>
	</body>
	</html>
	<script>
	var app = new Vue({
	el: "#app",
	data:{
	gender: 1
	},
	methods:{

	},
	filters:{
	genderFilter(value){
	if(value == 1){
	return "男"
	}else if(value == 0){
	return "女"
	}
	}
	}
	})
	</script>