vue 入门笔记 Vue 自定义指令

最新推荐文章于 2022-07-13 14:57:28 发布

坎大哈

最新推荐文章于 2022-07-13 14:57:28 发布

阅读量195

点赞数

分类专栏： vue 入门笔记文章标签： Vue 自定义指令

本文链接：https://blog.csdn.net/nicepainkiller/article/details/87791760

版权

vue 入门笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

Vue 自定义指令

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1 v-color>全局自定义指令</h1>
			<p></p>
			<h1 v-color2="blue">全局自定义指令2</h1>
			<p></p>

			<h1 v-color3="yellow">全局自定义指令2</h1>

			<p></p>
			<h1 v-formart>
				1,
				2,
				3,
				4,
				05,
				20,
				100
			</h1>
			<p></p>
			<h1 v-formattime>{{dateFormat}}</h1>
		</div>


		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

		<script>
			//自定义指令：全局写法
			Vue.directive("color", function(el, binding) {
					console.log(el);
					console.log(binding)
					el.style[binding.name] = "red"

				}),

				Vue.directive("color2", function(el, binding) {
					console.log(el);
					console.log(binding)
					el.style["color"] = binding.expression
				})

			new Vue({
				el: "#app",
				data: {
					blue: "",
					yellow: "",
					dateFormat: "",
				},
				methods: {

				},
				computed: {

				},


				mounted: function() {
					var date = new Date()
					console.log(new Date())
					console.log(date.getTime())
					this.dateFormat = date.name;

					var y = date.getFullYear();
					var m = date.getMonth() + 1;
					m = m < 10 ? ('0' + m) : m;
					var d = date.getDate();
					d = d < 10 ? ('0' + d) : d;
					var h = date.getHours();
					h = h < 10 ? ('0' + h) : h;
					var minute = date.getMinutes();
					minute = minute < 10 ? ('0' + minute) : minute;
					var second = date.getSeconds();
					second = second < 10 ? ('0' + second) : second;
					this.dateFormat = y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
				},

				//自定义指令：局部写法  全部小写
				directives: {
					"color3": function(el, binding) {
						el.style.color = binding.expression
					},

					"formart": function(el, binding) {

						console.log(el.innerText)
						//let array = el.innerText.replace(" ","").split(',')
						let array = el.innerText.replace(/\s/g, "").split(',')
						for (let i = 0; i < array.length; i++) {
							if (array[i].length > 1) {
								if (array[i][0] == "0") {
									continue;
								}
							} else {
								if (array[i] < 10) {
									array[i] = "0" + array[i];
								}
							}
						}
						el.innerText = array;
					},

					"formattime": function(el, binding) {
						var date = new Date()
						console.log(new Date())
						console.log(date.getTime())

						this.dateFormat = date.toDateString();
					},
				}

			})
		</script>
	</body>
</html>

指令：指令名称需要小写

系统指令 : v-on, v-model, v-show, v-if

自定义指令: v-say, v-hello

1. 全局定义在 Vue 外边。Vue.directive(指令名称,function(el,bining){})

			//自定义指令：全局写法
			Vue.directive("color", function(el, binding) {
					console.log(el);
					console.log(binding)
					el.style[binding.name] = "red"

				}),

				Vue.directive("color2", function(el, binding) {
					console.log(el);
					console.log(binding)
					el.style["color"] = binding.expression
				})

2. 局部定义在 Vue 里面

				//自定义指令：局部写法  全部小写
				directives: {
					"color3": function(el, binding) {
						el.style.color = binding.expression
					},

					"formart": function(el, binding) {

						console.log(el.innerText)
						//let array = el.innerText.replace(" ","").split(',')
						let array = el.innerText.replace(/\s/g, "").split(',')
						for (let i = 0; i < array.length; i++) {
							if (array[i].length > 1) {
								if (array[i][0] == "0") {
									continue;
								}
							} else {
								if (array[i] < 10) {
									array[i] = "0" + array[i];
								}
							}
						}
						el.innerText = array;
					},

					"formattime": function(el, binding) {
						var date = new Date()
						console.log(new Date())
						console.log(date.getTime())

						this.dateFormat = date.toDateString();
					},
				}

坎大哈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue 入门笔记 Vue 自定义指令

Vue 自定义指令index.html&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &
复制链接

扫一扫