xinggevip

Vue2.x Cli3.x 自定义指令
About.vue<template> <div class="about&quo...
扫描右侧二维码阅读全文
31
2019/05

Vue2.x Cli3.x 自定义指令

About.vue

<template>
  <div class="about">
    <h1 v-rainbow>This is an about page</h1>
    <h2 v-them:bgblue="'green'">Hello</h2>
  </div>
</template>

main.js

// 自定义指令无参数
Vue.directive('rainbow',{
  bind(el,binding,vnode){
    el.style.color = "red";
  }
})

// 自定义指令有参数
Vue.directive('them',{
  bind(el,binding,vnode){
    if(binding.value == 'red'){
      el.style.color = "red";
    } else if(binding.value == 'green'){
      el.style.color = "green";
    }
    
    if(binding.arg == 'bgyellow'){
      el.style.background = "yellow";
    } else if(binding.arg == 'bgblue'){
      el.style.background = "blue";
    }
  }
})
Last modification:May 31st, 2019 at 08:50 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment