189 8069 5689

Vue.directive(指令名称,function(参数){
  this.el  -> 原生DOM元素
});

Vue.elementDirective('zns-red',{
  bind:function(){
    this.el.style.background='red';
  }
});

  
    asdfasd
  

Vue.directive('red',function(){
  this.el.style.background='red';
});
window.onload=function(){
  var vm=new Vue({
    el:'#box',
    data:{
      msg:'welcome'
    }
  });
};

  
    asdfasd
  

自定义指令写法二：推荐写法

  
    asdfasd
  

//这里的color可以传参
Vue.directive('red',function(color){
  this.el.style.background=color;
});
window.onload=function(){
  var vm=new Vue({
    el:'#box',
    data:{
      a:'blue'
    }
  });
};

测试示例：

  
    asdfasd
  

自定义指令写法三：

  
    asdfasd
  

Vue.directive('red',{
  bind:function(){
    this.el.style.background='red';
  }
});
window.onload=function(){
  var vm=new Vue({
    el:'#box'
  });
};

自定义指令：拖拽drag

自定义元素指令

以上就是如何在vue中实现自定义指令，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。