Vue核心--filter过滤器

Aucanon

已于 2022-05-31 18:17:31 修改

阅读量83

点赞数

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

于 2022-05-31 15:03:19 首次发布

本文链接：https://blog.csdn.net/weixin_51524737/article/details/125065743

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这篇博客介绍了Vue.js中自定义过滤器的用法，包括如何创建过滤器、传递参数以及串联多个过滤器。示例展示了如何使用过滤器对时间戳进行格式化显示，并通过全局过滤器`mySlice`截取字符串的一部分。文章还包含两个实际的HTML示例代码，分别演示了局部和全局过滤器的应用。

摘要由CSDN通过智能技术生成

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号|指示

功能：对要显示的数据进行特定格式化后再显示。

过滤器也可以接收额外参数、多个过滤器也可以串联。

注意：并没有改变原本的数据, 是产生新的对应的数据。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>过滤器</title>
		<script type="text/javascript" src="./vue.js"></script>
		<script type="text/javascript" src="./dayjs.min.js"></script>
	</head>
	<body>
		<div id="root">
			<h2>显示格式化后的时间</h2>
			<!-- 过滤器实现 -->
			<h3>现在是：{{time | timeFormater}}</h3>
			<!-- 过滤器实现（传参） -->
			<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
			<h3 :x="msg | mySlice">hello_vue</h3>
		</div>
	</body>

	<script>
		Vue.config.productionTip = false		
		new Vue({
			el:'#root',
			data:{
				time:1621562557846, //时间戳
				msg:'learn_vue'
			},
			filters:{
				timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
					return dayjs(value).format(str)
				}
			}
		})
	</script>
</html>

全局过滤器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>过滤器</title>
		<script type="text/javascript" src="./vue.js"></script>
		<script type="text/javascript" src="./dayjs.min.js"></script>
	</head>
	<body>
		<div id="root">
			<h2>{{msg | mySlice}}</h2>
		</div>
	</body>

	<script>
		Vue.config.productionTip = false
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})

		new Vue({
			el:'#root',
			data:{
				msg:'good_vue!'
			}
		})
	</script>
</html>

Aucanon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue核心--filter过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号|指示功能：对要显示的数据进行特定格式化后再显示。过滤器也可以接收额外参数、多个过滤器也可以串联。注意：并没有改变原本的数据, 是产生新的对应的数据。<!DOCTYPE html><html> <head> <
复制链接

扫一扫

专栏目录