码迷,mamicode.com
首页 > 其他好文 > 详细

vue 自定义指令

时间:2020-12-18 13:03:56      阅读:3      评论:0      收藏:0      [点我收藏+]

标签:定义   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();
          }
        }
      }

 

vue 自定义指令

标签:定义   bsp   fun   输入框   put   strong   function   ted   实例   

原文地址:https://www.cnblogs.com/limu-zy/p/14130150.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!