Vue 自定义指令 directive

最新推荐文章于 2024-10-25 22:16:00 发布

原创最新推荐文章于 2024-10-25 22:16:00 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

VUE 专栏收录该内容

117 篇文章

订阅专栏

本文介绍了如何在Vue中使用自定义指令实现元素的颜色设置和权限控制。示例展示了如何创建`red`指令将文本背景设为红色，以及`pemi`指令根据用户权限决定元素是否显示。

directive 自定义指令可`全局引入`，也可`单页面引入`

1⃣️ 在当前页面使用directive

<div>
  <p v-red>在当前页面使用directive，演示：当前标签背景为红色</p>
  <p v-pemi="user">权限为 user 不展示</p>
  <p v-pemi="admin">权限为 admin 展示</p>
</div>

directives: {
    red: {
      inserted(el, binding){
        el.style.background = 'red'
      }
    },
    pemi: {
      inserted(el, binding){
        const { value } = binding;
        if(value === 'user') {
          el.parentNode && el.parentNode.removeChild(el)
        }
      }
    }
}