alertdialog 自定义样式回调选手_Vue入门系列：八 directive 自定义指令

我们可以借助directive方法来实现自定义指令

基础版

    Vuejs

你好,张无忌

页面输出

解析

• vue.directive()方法 第一个参数表示自定义指令名称 因为v-是固定写法 可以省略
• 在组件上就可以 用v-mycolor 表示自定义指令
• vue.directive()方法第二个参数是一个回调方法 第一个参数el 表示绑定的元素
• el.style 表示可以在绑定的标签上对其样式进行自定义设置
• 我们设置了color:blue 体现在绑定的p标签就具备了这个属性 最终文字颜色为蓝色

增强版

    Vuejs

{{num}}

页面输出

解析

• v-my="color" 中color是变量值在data.color里
• 在vue.directive方法中 color值经过binding.value传递给到页面的style.color属性里
• 这样p标签就被赋予 color:red 样式 最终在页面上就可以显示20的颜色是红色