vue自定义指令的使用

最新推荐文章于 2022-11-24 15:08:41 发布

原创最新推荐文章于 2022-11-24 15:08:41 发布 · 269 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了在Vue应用中如何利用自定义指令来间接操作底层DOM元素，提供了一种局部和全局指令的使用方法，并强调其在复杂场景中的灵活性和便捷性。

在vue一些需求中需求操控底层的dom,解决办法除了用ref解决外,还可以用自定义指令去操控底层元素从而实现对应的效果.
使用方法:
html模块

<div v-insert="msg"><div>

js操控模块

data() {
   return {
       msg: '我是插入元素'
   }
},
directives: {
    insert(el, binding) {
     // el 是被操控的dom的元素
     // binding是自定义指令传来的值,去操作元素改变的值
      el.textContent = binding.value
    },
  },

这种是局部操控的自定义指令,如果有针对性的可以是使用全局的自定义指令去完成对应的需求