SOURCE

new Vue({
		el:'#demo',
		data:{
			current:'home'
		},
		methods:{
			change: function(cur){
				this.current = cur;
			}
		}
	});

<div id="demo">
		<ul class="nav" v-bind:class="[current]">
			<li class="home" @click="change('home')">home</li>
			<li class="news" @click="change('news')">news</li>
			<li class="projects" @click="change('projects')">projects</li>
			<li class="services" @click="change('services')">services</li>
			<li class="contact" @click="change('contact')">contact</li>
		</ul>
		<div>当前页面：{{current}}</div>
	</div>

	*{margin:0;padding:0}
		.nav{
			margin:100px auto 24px;
			overflow:hidden;
		}
		.nav li{
			background-color: #5597b4;
			padding:18px 30px;
			float: left;
			list-style-type:none;
			color:white;
			font-weight: bold;
			font-size: 20px;
			text-transform:uppercase;
			cursor:pointer;
		}
		.home .home,.news .news,.projects .projects,.services .services,.contact .contact{
			background-color:skyblue;
		}