标签:定义 bsp fun 输入框 put strong function ted 实例
自定义指令
当指令不满足需求时,可以自定义指令,语法如下:
Vue.directive(‘focus‘,{ inserted: function(el){ //el表示指令所绑定的元素 el.focus() } })
使用方法和其他指令一样
<input type="text" v-focus>
带参数的自定义指令
定义好指令,将数据定义好,再通过输入框应用
Vue.directive(‘color‘, { bind: function(el, binding){ // 根据指令的参数设置背景色 // console.log(binding.value.color) el.style.backgroundColor = binding.value.color; } });
<input type="text" v-color=‘msg‘>
var vm = new Vue({ el: ‘#app‘, data: { msg: { color: ‘blue‘ } } });
此时,当实例中数据msg改变,那么页面中输入框中的背景颜色也会改变。
局部定义指令
添加在Vue实例组件中,这时候该指令只能在Vue定义的实例中使用
directives: { focus: { //指令的定义 inserted: function(el) { el.focus(); } } }
标签:定义 bsp fun 输入框 put strong function ted 实例
原文地址:https://www.cnblogs.com/limu-zy/p/14130150.html