vue.js — 格式化时间、获取焦点事件

最新推荐文章于 2023-12-20 21:38:17 发布

原创最新推荐文章于 2023-12-20 21:38:17 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在Vue.js中使用全局和局部过滤器格式化日期时间，并展示了自定义指令实现输入框自动获取焦点及设置字体大小的方法。

vue.js — 格式化时间、获取焦点事件

今天记录一下 vue.js 里面的格式化时间和获取焦点时间。

格式化时间
定义格式化时间的全局过滤器:

<div id="app">
	<h3> {{ dt | dateFormat}}</h3>
</div>
<script>
	Vue.filter("dateFormat",function(dateStr,pattern=""){
		var dt = new Date(dateStr)
		var y = dt.getFullYear()
		var m = (dt.getMonth() + 1).toString().padStart(2,"0")
		var d = dt.getDay().toString().padStart(2,"0")
		if(pattern.toLowerCase() === "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}`
	}
})
</script>

2.定义格式化时间的局部过滤器:

<div id="app">
	<h3>{{dt | }}</h3>
</div>
<script>
	var vm =new Vue({
		el:"#app",
		data:{
			dt:new Date()
		},
		methods:{},
		filters:{
			dateFormat:function(dateStr,pattern=""){
			var dt = new Date(dateStr)
			var y = dt.getFullYear()
			var m = (dt.getMonth()+1).toString().padStart(2,"0")
			var d = dt.getDay().toString().padStart(2,"0")
			if(pattern.toLowerCase() === "yyyy-mm-dd"){
				return `${y}-${m}-${d}`
				}
				else{
					var hh = dt.getHours().toString().padStart(2,"0")
					var mm = dt.getMiuntes().toString().padStart(2,"0")
					var ss = dt.getSeconds().toString().padStart(2,"0")
					return `${y}-${m}-${d}-${hh}:${mm}:${ss}`
				}
			}
		}
	})
</script>

自定义指令——获取焦点
定义一个全局的获取焦点指令

<div id ="app">
<input type ="text" v-focus ></input>
</div>
<script>
Vue.directive("focus",{
	bind:function(el){	},
	inserted:function(el){
		el.focus()
	},
	updated:function(el){ }
})
	var vm =new Vue({
		el:"#app",
		data:{
			
		},
		methods:{},
		
	})
</script>

自定义一个私有的指令
自定义一个设置字体大小的指令

<div id ="app">
   <input type="text" fontsize="70">hello world</input>
</div>
<script>
   var vm =new Vue({
   	el:"#app",
   	data:{ },
   	methods:{},
   	directives:{
   		"fontsize":function(el,binding){
   			el.style.fontSize=parseInt(binding.value)+"px"
   		}
   	}
   })
</script>