当前位置：网站首页>14.过滤器的使用

14.过滤器的使用

2022-07-19 05:05:00 【风落不归处】

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单的逻辑处理）

语法:

        1.注册过滤器：Vue.filter(name,callback)或new Vue{filters:{}}

        2.使用过滤器：{ { xxx | 过滤器名 }}或v-bind:属性="xxx | 过滤器名"

           备注：过滤器也可以接收额外的参数、多个过滤器也可以串联

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>过滤器</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/dayjs.min.js"></script>
	</head>
	<body>
		<!-- 
			过滤器：
				定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
				语法：
						1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
						2.使用过滤器：{
   { xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"
				备注：
						1.过滤器也可以接收额外参数、多个过滤器也可以串联
						2.并没有改变原本的数据, 是产生新的对应的数据
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>显示格式化后的时间</h2>
			<!-- 计算属性实现 -->
			<h3>现在是：{
   {fmtTime}}</h3>
			<!-- methods实现 -->
			<h3>现在是：{
   {getFmtTime()}}</h3>
			<!-- 过滤器实现 -->
			<h3>现在是：{
   {time | timeFormater}}</h3>
			<!-- 过滤器实现（传参） -->
			<h3>现在是：{
   {time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
			<h3 :x="msg | mySlice">尚硅谷</h3>
		</div>

		<div id="root2">
			<h2>{
   {msg | mySlice}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})
		
		new Vue({
			el:'#root',
			data:{
				time:1621561377603, //时间戳
				msg:'你好，尚硅谷'
			},
			computed: {
				fmtTime(){
					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			methods: {
				getFmtTime(){
					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			//局部过滤器
			filters:{
				timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
					// console.log('@',value)
					return dayjs(value).format(str)
				}
			}
		})

		new Vue({
			el:'#root2',
			data:{
				msg:'hello,atguigu!'
			}
		})
	</script>
</html>

原网站

版权声明
本文为[风落不归处]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_43893483/article/details/125823149

边栏推荐

猜你喜欢

随机推荐