JSFiddle - React, Tailwind, and code Playground

by Kingdaro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0-beta.5/vue.min.js"></script>
<main></main>

JavaScript

class Square {
	constructor (size) {
  	this.size = size
  }
}

class Circle {
	constructor (radius) {
  	this.radius = radius
  }
}

const ShapeView = {
	template: `
		<div>
			<template v-if='isCircle'>
				Here is a circle.
				<div class='circle'></div>
				It's radius is {{ shape.radius }}
			</template>
			<template v-if='isSquare'>
				Here is a square.
				<div class='square'></div>
				It's width is {{ shape.size }}
			</template>
		</div>
	`,

	props: {
		shape: Object
	},

	computed: {
		isSquare () {
			return this.shape instanceof Square
		},
		isCircle () {
			return this.shape instanceof Circle
		}
	}
}

const App = {
	template: `
		<div>
			<a href='#' v-for='(shape, index) in shapes' @click='current = index'>
				Show Shape {{ index }}
			</a>
			<shape-view :shape='shapes[current]'></shape-view>
		</div>
	`,

	components: {
		ShapeView
	},

	data () {
		return {
	  	shapes: [
				new Square(40),
				new Circle(25)
			],
			current: 0
	  }
	}
}

new Vue({
	el: 'main',
  render: h => h(App)
})