Edit in JSRUN

console 命令行工具 X clear

                    
>
console
var test = new Vue({
	el:'#main',
	data:{
		active:'home'
	},
	methods:{
		makeActive:function(str){
			this.active = str;
		}
	}
});
<div id="main">
		<nav v-bind:class="active" v-on:click.prevent>
			<a href="#" class="home" v-on:click="makeActive('home')">home</a>
			<a href="#" class="project" v-on:click="makeActive('project')">project</a>
			<a href="#" class="services" v-on:click="makeActive('services')">services</a>
			<a href="#" class="contact" v-on:click="makeActive('contact')">contact</a>
		</nav>
		<p>你现在选择的是<b>{{active}}</b></p>
	</div>
*{
	margin:0;
	padding:0;
}
a{
	display:inline-block;
	text-decoration:none;
	padding:10px 20px;
	color:#fff;
	background-color:transparent;
}
nav{
	background-color: #666;
}

nav.home .home,
nav.project .project,
nav.services .services,
nav.contact .contact{
	background-color:#f00;
}

本项目引用的自定义外部资源