vue的自定义指令含大写字母会失效
<div id="app"> <p v-colorRed>这是一行文字</p> </div>
Vue.directive("colorRed",{ bind: function (el) { el.style.color = 'red'; } });
上面的例子代码并不能使文字颜色变红, 这是因为指令名中含有大写字母
原理:
html5规范规定, 写在html标签中的属性必须是小写(如果在JS中则是驼峰命名), 所以vue应该也是遵循这一规定, v-colorRed其实会转成v-colorred
所以directive函数的第一个参数改为"colorred"就行了.