定义
// 引入Vue
import Vue from 'vue'; // 定义全局自定义指令 `v-change-color`
Vue.directive('change-color', { // 当绑定元素插入到DOM中时…… inserted: function (el, binding) { // 这里的binding.value是你传递给指令的值 // 假设我们传递一个颜色字符串作为指令的值 el.style.color = binding.value; }, // 如果需要，也可以定义其他钩子函数，比如`update` // update: function (el, binding) { // // 响应数据变化时的逻辑 // el.style.color = binding.value; // }
}); // 创建Vue实例
new Vue({ el: '#app', data: { // 示例数据 }, // 其他选项...
});
模板使用
<div id="app"> <!-- 使用自定义指令，并传递颜色值 --> <p v-change-color="'red'">这段文字的颜色会被改变为红色。</p>
</div>
)
