vue tab面板

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

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

条件渲染：v-if

列表渲染：v-for

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

效果如下图：

接下来就是贴代码了：

html代码：

<divid="app">

    <div>

        <buttonv-for="(ind,key,index) in btn"v-bind:class="{active:(indexs==index)}"v-on:click="a(index)">{{ind}}</button>

    </div>

    <divclass="wrap">

        <divv-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">

  varapp = newVue({

    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文件引入即可。