attribute_class-binding.html

<!DOCTYPE html>
<html>
<head>
	<title>Vue 2</title>
	<style type="text/css">
		.color-red {
			color: red;
		}
	</style>
</head>
<body>
	<div id="root">
		<!-- v-bind = : -->
		<button :title="title">Hover Over Me</button>
		<h1 :class="{ 'color-red': isRed }">Hello World!</h1>
		<button @click="toggleClass">Click Me!</button>
	</div>
<script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>
<script type="text/javascript">
	new Vue({
		el: '#root',
		data: {
			title: 'Now the title is being set through Javascript',
			className: 'color-red',
			isRed: true
		},
		methods: {
			toggleClass() {
				this.isRed = !this.isRed;
			}
		}
	})
</script>
</body>
</html>