过滤器使用

最新推荐文章于 2022-06-18 15:08:42 发布

SunACong

最新推荐文章于 2022-06-18 15:08:42 发布

阅读量87

点赞数

分类专栏： Vue.js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44808710/article/details/125032630

版权

Vue.js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

过滤器

全局过滤器
- 连续调用过滤器
- 过滤器传多个参数
dayjs()

用在插值表达式和 v-bind

全局过滤器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="app">
			<p>{{msg | msgFormat}}</p>
		</div>
		<script>
			// 全局过滤器
			// 第一个参数已经被规定死了
			// 定义在Vue实例创建之前
			Vue.filter('msgFormat', function(data){
				// replace方法 第一个参数可以用字符串也可以用正则表达式
				return data.replace(/Vue/g,'哈哈')
			})

			var vm =  new  Vue({
				el : '.app',
				data () {
					return {
						msg:'学习Vue'
					}
				}
			})
			
		</script>
	</body>
</html>

连续调用过滤器

前面一个过滤器的返回值作为下一个过滤器的参数传入

<p>{{msg | msgFormat | XXX | XXX}}</p>

过滤器传多个参数

第一个参数永远是管道符前面的值
接受参数从第二个参数开始接收

dayjs()

Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。

SunACong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
过滤器使用

过滤器插值表达式v-bind插值表达式全局过滤器<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script> </head> <
复制链接

扫一扫

专栏目录