JSFiddle - React, Tailwind, and code Playground

by Edward Tanguay

HTML

<div id="app">
  <div class="box box1" v-border:red>
    {{box1Message}}
  </div>
  <div class="box box2" v-border:blue>
    {{box2Message}}
  </div>
  <button @click="changeContent">Change Content</button>
</div>

CSS

.box {
  margin: 0 0 5px 0;
}

JavaScript

var vm = new Vue({
	el: '#app',
	data: function() {
		return {
			box1Message: 'this is box 1',
			box2Message: 'this is box 2'
		}
	},
	methods: {
		changeContent: function() {
    	this.box1Message = 'changed1';
    	this.box2Message = 'changed2';
		}
	},
  directives: {
  	border: function(el, binding) {
    console.log(binding);
    	el.style.borderColor = binding.arg;
    	el.style.borderWidth = '2px';
    	el.style.borderStyle = 'solid';
  	}
  }
})