Vue学习--基础（1）--实现选项卡效果

vue实现选项卡效果：

1.页面布局代码：

<div id="app">
        <div class="tab">
            <ul>
                <li v-on:click="change(index)" :class="currentIndex==index?'active':''" :key="item.id"
                    v-for="(item,index) in list">{{item.title}}</li>
            </ul>
            <div :class="currentIndex==index?'current':''" :key="item.id" v-for="(item,index) in list">
                <img :src="item.path">
            </div>
        </div>
    </div>

这里的tab选项卡是一个无序列表，列表内容通过v-for指令遍历Vue实例中的列表数据进行渲染。
2.css样式部分代码

<style type="text/css">
       
        .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;
        }

        .tab div img {
            width: 500px;
            height: 300px;
        }
    </style>

3.<script></script>部分代码

<script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                currentIndex: 0,
                list: [{
                    id: 1,
                    title: "自来也",
                    path: "images/jiraiya.jpg"
                }, {
                    id: 2,
                    title: "卡卡西",
                    path: "images/kakashi.jpg"
                }, {
                    id: 3,
                    title: "鸣人",
                    path: "images/naruto.jpg"
                }]
            },
            methods: {
                change: function (index) {
                    // console.log(index);
                    this.currentIndex = index;
                }
            }
        });
    </script>

（1）点击选项卡列表的每一项，也就是每一个小li，会调用change(index)方法，并将该li的index传递给change(index) 方法。
（2）在change(index) 方法内部将拿到的index赋值给data对象的currentIndex变量。
（3）在每个小li上通过:class 绑定被点击时的样式为active，设置被点击的选项卡背景色为orange，否则样式为空。
（4）在下部分展示图片的div区域，通过:class 绑定与li 的索引相同时样式为current，设置当前要显示的图片div的display 属性为block，从而显示当前选项卡对应的图片；其他图片的样式为display:none，被隐藏。
小结：

• 使用了:class样式绑定
• 使用v-for遍历数组