Vue2.0 内置指令directives 与全局配置过滤filters

最新推荐文章于 2024-06-12 13:02:56 发布

敲代码的小吉米

最新推荐文章于 2024-06-12 13:02:56 发布

阅读量188

点赞数 2

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

本文链接：https://blog.csdn.net/promise466/article/details/127028028

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

内置指令directives

除了核心功能默认内置的指令 (例如 v-model 和 v-show)，Vue 也允许注册自定义指令。你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>自定义指令</h1>
			<input type="text" v-focus="flag">
			<button @click.prevent.stop="flag=!flag">改变</button>
		</div>
		<script>
			new Vue({
				el:"#app",
				data(){return {flag:true}},
				directives:{
					// 自己定义v-focus指令
					"focus":{
						// 当被插入时候inserted
						update(el,binding){
							// el指令对应的节点
							// binding.value 指令的值
							console.log(el,binding)
							if(binding.value){
								// 让指令对应的节点获取焦点
								el.focus();
							}
						}
					}
				}
			})
		</script>
	</body>
</html>

全局配置过滤或者管道filters

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>过滤或者管道</h1>
			<!-- <p>{{100}}-{100.23}</p> -->
			<p>{{3.415926|fix}}</p>
			<p>{{3.415926|fix(3)}}</p>
			<p>{{3.415926|fix(5)}}</p>
			<hr>
			<p>{{2022-09-20}}->{{'2天前'}}</p>
			<p>{{'2022-09-20'|date}}</p>
			<p>{{'2021-09-22'|date}}</p>
			<p>{{'2022-09-22'|date}}</p>
		</div>
		<script>
			new Vue({
				el:"#app",
				filters:{
					fix(val,len=2){
						return Number(val).toFixed(len)
					},
					date(val){
						// 获取1970.1月1日到当前的毫秒数
						var time1=new Date(val).getTime();  //输入的时间0920距离1970年的时间
						var time2=new Date().getTime(); //今天的时间距离1970的时间
						// 获取毫秒数
						var dis=time2-time1;
						// 转换天数
						var day=Math.round((dis/1000/60/60/24));
						// 返回
						return day+"天前";
					}
				}
			})
		</script>
	</body>
</html>

敲代码的小吉米

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2.0 内置指令directives 与全局配置过滤filters

除了核心功能默认内置的指令 (例如 v-model 和 v-show)，Vue2.0也允许注册自定义指令。你仍然需要对普通DOM元素进行底层操作，这时候就会用到自定义指令。
复制链接

扫一扫

专栏目录