使用vue实现tab切换例子

最近比较火的前端mvvm框架分别是angular、react和vue。作为一个合格的程序员，如果不掌握这些mvvm框架真的会被残酷的现实淘汰掉。最近研究了下vue.js，感觉这款小巧的mvvm框架非常的不错，特别是在与后台进行数据交互渲染页面的时候效率非常高，不需像原生那样去操作dom节点和拼接字符.......

这里主要用vue来实现tab切换的效果。主要用到vue渲染的两个知识点：

条件渲染：v-if

列表渲染：v-for

至于这是怎么意思.....自己去看文档

效果如下图：

接下来就是贴代码了：

html代码：

<div id="app">
	<div>
		<button v-for="(ind,key,index) in btn" v-bind:class="{active:(indexs==index)}" v-on:click="a(index)">{{ind}}</button>
	</div>
	<div class="wrap">
		<div v-for="(w,key,index) in box" v-if="indexs == index">{{w}}</div>
	</div>
</div>

css代码：

.wrap div{
		width: 300px;
		height: 300px;
		background-color: #0cc;
	}
.active{
	background-color: red
}

js代码

<script type="text/javascript">
  var app = new Vue({
	el:"#app",
	data:{
	    btn:{a:"按钮1",b:"按钮2",c:"按钮3"},
	    box:{aa:"tab切换1",bb:"tab切换2",cc:"tab切换3"},
	    indexs:0,
	    a:function(str){
	        this.indexs=str;
	    }
	}
    })
</script>

一般情况下vue是用来做单页web应用的，官网也介绍了它所依赖的环境以及安装方法，喜欢这款mvvm框架的朋友可以去官网看看。

当然，这里只是在本地测试练习用的，直接在官网下载vue.js文件引入即可。