JSFiddle - React, Tailwind, and code Playground

by imys

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<div id="app">
  <hello :directive="directive"></hello>
</div>

Babel + JSX

const hello = {
	render: function(h) {
    const directives = this.directive.map(s => { 
    	return { name: s }
    })

  	return h('div', {
    	directives: directives
    })
  },
  props: {
  	directive: Array
  }
}

Vue.directive('a', {
  bind(el) {
     el.innerHTML += '【指令a插入成功】'
  }
})

Vue.directive('b', {
  bind(el) {
     el.innerHTML += '【指令b插入成功】'
  }
})

new Vue({
	el: '#app',
  components: {
  	hello
  },
  data: {
  	directive: ['a', 'b']
  }
})