Vue系列教程（二十三）使用钩子函数的第二个binding参数拿到传递的值

Odetta ·

更新时间:2024-09-21

· 613 次阅读

有时我们想要在DOM绑定的时候设置自定义的样式，做法如下：

// 自定义一个设置字体颜色的指令
Vue.directive('color', {
    bind: function (el) {
        el.style.color = 'red'
    }
})

使用：

效果：
在这里插入图片描述

注意：

bind只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有个一个内联的样式将来元素肯定会显示到页面中，这时候，浏览器渲染引擎必然会解析样式，应用给这个元素和JS行为有关的操作，最好在inserted中去执行，防止JS行为不生效和样式相关的操作，一般都可以在bind中执行

binding传递值

将v-color的声明方式改为如下：

Vue.directive('color', {
    bind: function (el,binding) {
        el.style.color = binding.value
    }
}

调用方式改为如下：

页面效果：
在这里插入图片描述

推荐阅读：
Vue系列教程（一）基础介绍
Vue系列教程（二）v-cloak、v-text、v-html的基本使用
Vue系列教程（三）v-bind指令
Vue系列教程（四）v-on指令定义事件
Vue系列教程（五）跑马灯效果案例
Vue系列教程（六）事件修饰符
Vue系列教程（七）v-model和双向数据绑定
Vue系列教程（八）v-model实现计算器案例
Vue系列教程（九）属性绑定为元素设置class类样式
Vue系列教程（十）属性绑定为元素绑定style行内样式
Vue系列教程（十一）v-for指令的四种使用方式
Vue系列教程（十二）v-for中key的使用注意事项
Vue系列教程（十三）v-if和v-show的使用和特点
Vue系列教程（十四）品牌管理案例-品牌列表的添加功能
Vue系列教程（十五）品牌管理案例-根据Id完成品牌的删除
Vue系列教程（十六）品牌管理案例-根据关键字实现数组的过滤
Vue系列教程（十七）全局过滤器的基本使用
Vue系列教程（十八）品牌管理案例-定义格式化时间全局过滤器
Vue系列教程（十九）私有过滤器的基本使用
Vue系列教程（二十）字符串的padStart方法使用
Vue系列教程（二十一）自定义按键修饰符
Vue系列教程（二十二）自定义全局指令让文本获取焦点