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
开发工具