在vue一些需求中需求操控底层的dom,解决办法除了用ref解决外,还可以用自定义指令去操控底层元素从而实现对应的效果.
使用方法:
html模块
<div v-insert="msg"><div>
js操控模块
data() {
return {
msg: '我是插入元素'
}
},
directives: {
insert(el, binding) {
// el 是被操控的dom的元素
// binding是自定义指令传来的值,去操作元素改变的值
el.textContent = binding.value
},
},
这种是局部操控的自定义指令,如果有针对性的可以是使用全局的自定义指令去完成对应的需求