Vue与指令，用自定义指令模拟实现一个v-show

在Vue2中一个自定义指令中有几个钩子函数。

• bind :只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• update : 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。

如果只想在bind和update触发相同行为，可以直接写一个函数。

用自定义指令模拟实现v-show

//Home.vue
<template>
	<div class="home">
		<button @click="show = !show">自定义指令模拟实现v-show</button>
		<div v-mini-show="show">实现一个v-show</div>
		<br />
		<button @click="show = !show">自定义指令模拟实现v-show</button>
		<div v-mini-show-options="show">实现一个v-show</div>
	</div>
</template>

<script>
export default {
	name: "Home",
	data() {
		return {
			show: true
		};
	},
	directives: {
		// 使用函数实现
		"mini-show": (el, binding) => {
			!binding.value
				? (el.style.display = "none")
				: (el.style.display = "");
		},
		// 使用钩子函数实现
		"mini-show-options": {
			bind(el, binding) {
				!binding.value
					? (el.style.display = "none")
					: (el.style.display = "");
			},
			update(el, binding) {
				!binding.value
					? (el.style.display = "none")
					: (el.style.display = "");
			}
		}
	}
};
</script>

参考Vue自定义指令:https://cn.vuejs.org/v2/guide/custom-directive.html

参考https://cn.vuejs.org/v2/api/#v-show

参考https://cn.vuejs.org/v2/guide/conditional.html#v-show