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

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

//Home.vue
<template>
	<div class="home">
		<div v-mini-text="msg"></div>
		<!-- 作用和下面一样 -->
		<div>{{msg}}</div>
	</div>
</template>

<script>
export default {
	name: "Home",
	data() {
		return {
			msg: "模拟实现v-text指令"
		};
	},
	directives: {
		// 使用函数实现
		"mini-text": (el, binding) => {
			el.textContent = binding.value;
		}
	}
};
</script>

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

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

posted @ 2019-09-07 20:36  氵灬  阅读(121)  评论(0编辑  收藏  举报