Vue自定义指令无法生效，请求排查问题原因

问题1：v-display传值方式错误 #

你在main.ts里注册的全局指令v-display逻辑本身没问题，但使用时写法有误：

<!-- 错误写法 -->
<h1 v-display:none>...</h1>

Vue中给指令传递字符串字面量必须用引号包裹，否则none会被当作未定义的变量解析，导致binding.value为undefined，指令无法生效。正确写法：

<!-- 正确写法 -->
<h1 v-display="'none'">...</h1>

问题2：v-color注册方式错误 #

你在App.vue里用app.directive('color', ...)是错误的——app是main.ts中创建的Vue根实例，组件内部不能直接通过这种方式全局注册指令。

修复方案1：局部注册指令 #

在需要使用v-color的组件（比如你的FAQ组件）中，通过directives选项注册局部指令并实现逻辑：

<script setup>
const directives = {
  color: {
    beforeMount: (el) => {
      el.style.color = 'red'
    }
  }
}
</script>

<!-- 使用指令 -->
<h1 v-color>...</h1>

修复方案2：全局注册v-color #

如果要让所有组件都能直接使用v-color，把注册代码移到main.ts中，和v-display放在一起：

// main.ts
app.directive('display', {
  beforeMount: (el, binding) => {
    el.style.display = binding.value
  }
})

app.directive('color', {
  beforeMount: (el) => {
    el.style.color = 'red'
  }
})

额外检查：样式优先级冲突 #

你的h1标签上有text-black dark:text-white这类类名，若这些类的样式优先级意外高于指令设置的内联样式（可通过浏览器开发者工具查看元素style属性确认），也会导致指令效果被覆盖。

内容的提问来源于stack exchange，提问作者Tomas Gil Amoedo