Vue过滤器的应用

于 2019-07-16 15:31:09 发布
阅读量173 收藏
点赞数
分类专栏： vue 文章标签： vue 过滤器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42488433/article/details/96131987
版权

时间的格式化

1.第一种方法

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<link rel="stylesheet" type="text/css" href="index.css">
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		{{time}}
		</br>{{time|datefmt}}
	</div>
	<div id="app1">
		{{time|datefmt}}
	</div>

	<script src="index.js"></script>
</body>
</html>
Vue.filter('datefmt',function(input){
	var res = '';
	var year = input.getFullYear();
	var month = input.getMonth() + 1;
	var day = input.getDate();

	res = year + '-' + month + '-' +day;

	return res;
})

var vm = new Vue({
	el:'#app',
	data:{
		time:new Date()
	}
})

var vm = new Vue({
	el:'#app1',
	data:{
		time:new Date()
	}
})

效果图：

 

2.第二种方法：用字符串模版

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<link rel="stylesheet" type="text/css" href="index.css">
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		2018-05-25T14:06:51.618Z
		</br>{{'2018-05-25 14:06:51' |dateFormat}}
	</div>

	<script src="index.js"></script>
</body>
</html>
Vue.filter('dateFormat', function (dateStr,pattern=""){
	//根据给定的时间字符串，得到特定的时间
	var dt = new Date(dateStr)

	//  yyyy-mm-dd
	var y = dt.getFullYear()
	var m = dt.getMonth() + 1
	var d = dt.getDate()

	//return y + '-' + m + '-' + d

	if (pattern.toLowerCase() === 'yyyy-mm-dd') {
		//如果调用过滤器的参数写的是yyyy-mm-dd，那就按照这个格式写
		return `${y}-${m}-${d}`
	}else{
		//否则，后面补上时：分：秒

		var hh = dt.getHours()
		var mm = dt.getMinutes()
		var ss = dt.getSeconds()

		return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
	}
})

new Vue({
	el:'#app',
	data:{
		time: new Date()
	}
})

 

效果图：

上图中，我们可以看到5要写成05更合适。为了实现这个功能，作出了改进

改进：用字符串的padStart方法

使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')来填充字符串。 pad在英文中指的是补充。

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<link rel="stylesheet" type="text/css" href="index.css">
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		2018-05-25T14:06:51.618Z
		</br>{{'2018-05-25 14:06:51' |dateFormat}}
	</div>

	<script src="index.js"></script>
</body>
</html>
Vue.filter('dateFormat', function (dateStr,pattern){
	//根据给定的时间字符串，得到特定的时间
	var dt = new Date(dateStr)

	//  yyyy-mm-dd
	var y = dt.getFullYear()
	var m = (dt.getMonth() + 1).toString().padStart(2,'0')
	var d = dt.getDate().toString().padStart(2,'0')

	//return y + '-' + m + '-' + d

	if (pattern&&pattern.toLowerCase() === 'yyyy-mm-dd') {
		//如果调用过滤器的参数写的是yyyy-mm-dd，那就按照这个格式写
		return `${y}-${m}-${d}`
	}else{
		//否则，后面补上时：分：秒

		var hh = dt.getHours().toString().padStart(2,'0')
		var mm = dt.getMinutes().toString().padStart(2,'0')
		var ss = dt.getSeconds().toString().padStart(2,'0')

		return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
	}
})

new Vue({
	el:'#app',
	data:{
		time: new Date()
	}
})

效果图：

 

pattern参数的解释：

在做if (pattern && pattern.toLowerCase() === 'yyyy-mm-dd')这个判断时，逻辑是：先保证pattern参数传进来了，然后继续后面的判断。

我们不能写成：if (pattern.toLowerCase() === 'yyyy-mm-dd')。因为，万一在调用的时候，不传递参数pattern，那么 if语句就相当于if (undefined.toLowerCase() === 'yyyy-mm-dd')，就会报错。

 

因为ES6中有个新特性叫“默认参数”，我们就可以这样写：

Vue.filter('dateFormat', function (dateStr,pattern=''){
	//根据给定的时间字符串，得到特定的时间
	var dt = new Date(dateStr)

	//  yyyy-mm-dd
	var y = dt.getFullYear()
	var m = (dt.getMonth() + 1).toString().padStart(2,'0')
	var d = dt.getDate().toString().padStart(2,'0')

	//return y + '-' + m + '-' + d

	if (pattern.toLowerCase() === 'yyyy-mm-dd') {
		//如果调用过滤器的参数写的是yyyy-mm-dd，那就按照这个格式写
		return `${y}-${m}-${d}`
	}else{
		//否则，后面补上时：分：秒

		var hh = dt.getHours().toString().padStart(2,'0')
		var mm = dt.getMinutes().toString().padStart(2,'0')
		var ss = dt.getSeconds().toString().padStart(2,'0')

		return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
	}
})

new Vue({
	el:'#app',
	data:{
		time: new Date()
	}
})

 

 

 

自定义私有过滤器

私有过滤器：在某一个 vue 对象内部定义的过滤器称之为私有过滤器。这种过滤器只有在当前vue对象的el指定的监管区域有用。

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<link rel="stylesheet" type="text/css" href="index.css">
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		{{time}}
		</br>{{time|datefmt}}
	</div>
	<div id="app1">
		{{time|datefmt}}
	</div>

	<script src="index.js"></script>
</body>
</html>

 

new Vue({
	el:'#app',
	data:{
		time: new Date()
	},
	//在某一个vue对象内部定义的过滤器称之为私有过滤器，
	//这种过滤器只有在当前vue对象el指定的监管的区域有用
	filter:{
		//input是自定义过滤器的默认参数，input的值永远都是取决于 |左边的内容
		datefmt:function(input){
			var res = '';
			var year = input.getFullYear();
			var month = input.getMonth();
			var day = input.getDate();

			res = year + '-' + month + '-' + day;

			return res;
		}
	}
})

 

总结

过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器。

 

Czccava
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue过滤器的使用
qq_41743601的博客
08-12 284
vue过滤器的使用及生命周期 文章目录vue过滤器的使用及生命周期1.过滤器的作用2.定义过滤器和使用2.1全局定义过滤器：2.2局部定义过滤器2.3过滤器的基本使用3.带参数的过滤器4.vue生命周期 1.过滤器的作用 2.定义过滤器和使用 2.1全局定义过滤器： Vue.filter(‘名称’,function(value){ 业务逻辑 }) 2.2局部定义过滤器 filters：{ upper:function(){ //其中：upper为过滤器名称，function为逻辑处理 } } 2.3过滤器
vue中过滤器的使用
weixin_46376652的博客
07-10 556
Vue.filter(name,callback) 或 new Vue({ filter:{...} }){{xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"使用管道符 | 进行分割，直接使用data中的数值，管道符后再接过滤器进行操作{{time | setTime}}：time是传入的时间参数，setTime是过滤器的名字，它会将time作为参数val传入到过滤器setTime(val)中，最后将return结果替换掉整个插值语法； 当调用的时候传入了参数，第一
Vue过滤器
北海之灵的博客
08-13 381
1.全局过滤器 Vue允许你自定义过滤器，可被用作一些常见文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在JavaScript 表达式的尾部，由 "管道"符指示。 过滤器的语法 过滤器中的function，第一个参数，已经被规定死了，永远都是过滤器管道符前面传递过来的数据。 /*过滤器的语法*/ //过滤器中的function，第一...
toLowerCase()的用法
热门推荐
tianfengqian的博客
11-28 2万+
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
toUpperCase()和toLowerCase()方法
王春雨
12-28 7929
toUpperCase的意思是将所有的英文字符转换为大写字母，如： String  str = “abcd”.toUpperCase();结果就是：abcd。 toLowerCase的意思是将所有的英文字符转换为小写字母，如： String  str= “abcd”.toUpperCase();结果就是：ABCD。
string.ToLowerCase()用法
菜鸟的大神梦的专栏
03-14 9173
string.ToLowerCase()是将string这个字符串中的字母全部变成小写，而非字母则不作改变。 比如： 会将“My name is Tom!”变成“my name is tom!”
vue 内置过滤器的使用总结(附加自定义过滤器)
12-08
Vue.js 是一款流行的前端JavaScript框架，它提供了丰富的功能，其中包括过滤器（filters）这一特性。过滤器主要用于数据处理，它可以...在实际开发中，理解并熟练使用这些过滤器，能让你的 Vue 应用更加优雅和高效。
Vue过滤器的用法和自定义过滤器使用
08-31
Vue.js是近年来非常流行的...通过上述内容，我们可以了解到Vue过滤器的强大功能以及如何在Vue.js项目中有效地使用它们。无论是内置过滤器还是自定义过滤器，掌握它们的使用方法，都可以大大提高开发效率和应用质量。
vue2 v-model/v-text 中使用过滤器的方法示例
10-17
在Vue.js中，过滤器（Filters）是Vue实例的一个非常有用的特性，它允许用户对从插值...通过这些知识点，可以了解到如何在Vue2中定义和使用过滤器，以及如何在不支持直接使用过滤器的上下文中间接实现过滤器的应用。
Vue filter 过滤器、以及在table中的使用介绍
10-14
2. 在main.js文件中引入这个过滤器模块，并使用Vue.filter方法将过滤器应用到Vue实例中： ```javascript // filters.js let isActiveFilter = function(value) { return value === 1 ? '激活' : '冻结'; }; ...
Vue 过滤器filters及基本用法
11-27
本篇文章将详细介绍Vue过滤器的基本概念、用法以及如何创建自定义过滤器。 ### Vue 过滤器的定义与应用 过滤器在Vue中主要用于处理和格式化数据。它们可以在模板的Mustache语法（双大括号）或v-bind指令中使用，...
jQuery图片放大镜插件
niuyongaiai的博客
09-13 3658
运行效果： 代码编辑： 响应式jQuery图片放大镜插件
Vue学习记录--私有和全局过滤器的使用
小灰狼与大白兔的博客
02-17 6178
修改上一篇vue博客的品牌案例 过滤器 概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示； 私有过滤器 HTML元素： &amp;lt;td&amp;gt;{{item.ctime | dataFormat('yyyy-mm-dd')}}&amp;lt...
Vue过滤器的使用
微瞰技术的博客
08-15 2286
Vue过滤器 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="lib/vue.min.js"&gt;&a
使用navigator.userAgent.toLowerCase()判断登陆端是pc还是手机
H小志
08-23 2万+
在跨平台，各种浏览器，移动设备兼容的时候，经常要根据设备、浏览器做特定调整，所以判断设备和浏览器的工作，经常会用到，这里做一下总结。 有关浏览器类型的信息都藏在USER-AGENT里面，首先读取navigator.userAgent里面的信息，为了方便利用toLowerCase方法转成小写的形式。然后用MATCH方法进行匹配版本信息，这里提供了多个版本的测试信息，可以用来做后续代码的接口。
html5表单验证
weixin_39840445的博客
09-26 1334
1.第一步在js中写方法，放在$(document).ready(function(){})里面 //需要但没有填写区域的提示格式 var enrollBatchForm = $("form[id^='enrollBatchForm']"); enrollBatchForm.each(function(){ var formId = this.id; var flag = formId.
餐厅点餐系统springboot.zip
最新发布
09-10
开发一个基于Spring Boot的餐厅点餐系统可以大大提高餐厅的服务效率和顾客体验。下面是一个简单的案例程序，展示了如何使用Spring Boot来构建这样一个系统。这个系统将包括用户管理、菜单管理、订单管理等基本功能。 1. 创建项目 首先，通过Spring Initializr（https://start.spring.io/）创建一个新的Spring Boot项目，并添加必要的依赖项，如Web、Thymeleaf、Spring Data JPA 和 MySQL Driver。
vue过滤器分装使用
04-29
下面是Vue过滤器的封装使用方法： 1. 创建过滤器函数：首先，在Vue实例或组件中定义一个过滤器函数。这个函数接收一个参数，即需要处理的数据，并返回处理后的结果。 ```javascript Vue.filter('filterName', ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值