自定义指令
vue为我们提供了自定义指令功能
自定义指令语法规则
Vue.directive('自定义指令名' , { inserted: function(el) { // el 获取到的元素 el.focus(); } })
带参数的自定义指令
<input type="text" v-color="col">
<script>
Vue.directive('color', {
inserted: function(el, binding) {
el.style.backgroundColor = binding.value.color;
}
})
var vm = new Vue({
el: '#app',
data: {
col: {
color: 'red'
}
},
})
</script>
局部自定义指令 (组件中接受一个directives的选项)
<input type="text" v-focus> <input type="text" v-color="col"> <script> var vm = new Vue({ el: '#app', data: { col: { color: 'orange' } }, directives: { color: { inserted: function(el, binding) { el.style.backgroundColor = binding.value.color; } }, focus: { inserted: function(el) { el.focus(); } } } }) </script>
自定义指令用法 (在自定义指令名前面加v-)
<input type="text" v-color="col">
<input type="text" v-focus>