（四）Vue基础构建简易的Tab选项卡

首先我们先来介绍一下循环操作。
循环语句我们使用的是v-for，其语法如下：

<li :key="item.id" v-for="(item,index) in list">{{item.title}}</li>

我们也可以写成如下形式：

<li :key="item.id" v-for="(item) in list">{{item.title}}</li>

index就是条目的索引，大家还可以看到这里写了一个：key，那这个有什么作用呢？
它的作用就是帮助vue识别条目，提高性能的作用。

接下来就介绍Tab选项卡
简易实现Tab选项卡如下：

按哪一个选项就显示对应的内容。
实现这个功能代码结构很简单，首先是css重写列表等元素：

    <style>
        .tab ul{
            overflow: hidden;
            padding: 0;
            margin: 0;
        }
        .tab ul li{
            box-sizing: border-box;
            padding: 0;
            float: left;
            width: 100px;
            height: 45px;
            line-height: 45px;
            list-style: none;
            text-align: center;
            border-top: 1px solid blue;
            border-right: 1px solid blue;
            cursor: pointer;
        }
        .tab ul li:first-child{
            border-left: 1px solid blue;
        }
        .tab ul li.active{
            background-color: orange;
        }
        .tab div{
            width: 500px;
            height: 300px;
            display: none;
            text-align: center;
            font-size: 30px;
            line-height: 300px;
            border: 1px solid blue;
            border-top: 0px;
        }
        .tab div.current{
            display: block;
        }
    </style>

接下来就是循环结构展示出所有选项：

	<div id="app">
        <div class="tab">
            <ul>
               <li :key="item.id" v-for="(item,index) in list">{{item.title}}</li>
            </ul>
            <div :key="item.id" v-for="(item,index) in list">
                {{item.value}}
            </div>
        </div>
    </div>

大家从代码中应该就可以知道，现在点击选项是无法改变内容的，那我们应该如何实现呢？
我们可以添加一个标记，记住我们点击的是哪一个选项。
我们设立一个conCurrentIndex，初始值就设为0（默认第一个）。
然后我们动态绑定class，当然我们也需要一个点击函数。
更改后的代码如下：

        <div class="tab">
            <ul>
               <li @click="tab(index)" :class='conCurrentIndex==index?"active":""' :key="item.id" v-for="(item,index) in list">{{item.title}}</li>
            </ul>
            <div :class='conCurrentIndex == index?"current":""' :key="item.id" v-for="(item,index) in list">
                {{item.value}}
            </div>
        </div>
    </div>

我们通过三元表达式就可以实现动态的添加class。
我们的js代码如下：

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data:{
                conCurrentIndex:0,
                list:[{
                    id:1,
                    value: "nihao",
                    title: "first"
                },{
                    id:2,
                    value: "buhao",
                    title: "second"
                },{
                    id:3,
                    value: "haobuhao",
                    title: "third"
                }]
            },
            methods:{
                tab: function(index){
                    vm.conCurrentIndex = index;
                }
            }
        })
    </script>

到这大家应该可以自己完整的构建出这个玩意儿了。
这是对之前Vue基础的一个小应用，接下来我们就要进入表单操作以及前后交互了，很是期待呢！