VueJS2 Net Ninja Part 4

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>VueJS2 Tutorials</title>
	<link href="style.css" rel="stylesheet">
	<script src="http://unpkg.com/vue"></script>
</head>
<body>
	<div id="vue-app">
    <h1>Dynamic CSS</h1>
		<button @click="nearby = !nearby">Toggle Nearby</button>
		<button @click="available = !available">Toggle Available</button>
		<div :class="compClasses">
			<span>Jen</span>
		</div> 
  </div>
	<script src="app.js"></script>
</body>
</html>

CSS

span{
	background: red;
	display: inline-block;
	padding: 10px;
	color: #fff;
	margin: 10px;
}

.available span{
	background: green;
}

.nearby span:before{
	content: "fahrettin";
	margin-left: 10px;
  margin-right: 15px;

}

Vue

new Vue({
  el: '#vue-app',
  data: {
  	available: false,
    nearby: false
  },
  computed: {
	  compClasses: function(){
    	return {
        available: this.available,
        nearby: this.nearby
      }
    }
  }
});