vue directive

Question

Vue.directive('numcolor',function(el,binding){
        el.style = 'color:'+binding.value
      });
      Vue.directive("bg",function(el,binding){
        el.style = 'background:'+binding.value    
      })
      var app = new Vue({
        el: '#app',
        data:{
            num:10,
            color:'red',
            bg:'yellow'
        },
        methods:{
            add:function(){
              this.num++
            }
        }
      })
html: 
 <div v-numcolor="color" v-bg="bg">{{num}}</div>

为什么定义两个自定义属性 v-numcolor 和v-bg 只有v-bg起作用呢？

Answer 1

后面的把前面的覆盖了，把 = 改为 += 试试

Vue.directive('numcolor',function(el,binding){
    el.style += 'color:'+binding.value+';'
  });
  Vue.directive("bg",function(el,binding){
    el.style += 'background:'+binding.value+';'    
  })