Vue2.0实战

<div class="yo-flex" id="app">
    <header class="yo-header lh-header">
        <h2 class="title">选择车型</h2>
        <a href="javaScript:history.go(-1);" class="regret yo-ico"> </a>
    </header>
    <div class="flex" @click="closeDetails">
        <!--热门车型区-->
        <section class="hot-box">
            <h4 class="title">热门车型</h4>
            <ul class="hot-list" v-cloak>
                <li class="hot-item" v-for="item in hotList">
                    <img :src="item.imgSrc" alt="车标">
                    <span>{{item.title}}</span>
                </li>
            </ul>
        </section>

        <!--车型列表区-->
        <ul class="total-list" v-cloak>
            <li class="total-item" v-for="item in typeList">
                <h4 class="title">{{item.letter}}</h4>
                <ul class="car-list">
                    <li v-for="(carItem,index) in item.carList" @click.stop="checkType(index,item.carList)">
                        {{carItem.carName}}
                    </li>
                </ul>

            </li>
        </ul>
        <!--车型字母表-->
        <div class="letter-box" v-cloak>
            <ul class="letter-list">
                <li v-for="item in typeList">{{item.letter}}</li>
            </ul>
        </div>

        <ul class="car-type-list" v-show="showDetails" v-cloak>
            <li class="type-item" :class="{checked: detailActive == index}" v-for="(item,index) in detailsList" @click.stop="checkDetails(index)"><span>{{item}}</span></li>
        </ul>
    </div>
</div>

    var vm = new Vue({
        el: '#app',
        data: {
            showDetails: false,
            hotList: [
                {
                    title: '大众',
                    imgSrc: 'images/car/dazong.png'
                },
                {
                    title: '大众',
                    imgSrc: 'images/car/dazong.png'
                },
                {
                    title: '大众',
                    imgSrc: 'images/car/dazong.png'
                },
                {
                    title: '大众',
                    imgSrc: 'images/car/dazong.png'
                },
                {
                    title: '大众',
                    imgSrc: 'images/car/dazong.png'
                },
                {
                    title: '大众',
                    imgSrc: 'images/car/dazong.png'
                },
                {
                    title: '大众',
                    imgSrc: 'images/car/dazong.png'
                },
                {
                    title: '大众',
                    imgSrc: 'images/car/dazong.png'
                }
            ],
            typeList: [
                {
                    letter: 'A',
                    carList: [
                        {
                            carName: '奥迪',
                            carType: ['A4','A4(进口)','A4L','A5','A6','A7','A8']
                        },
                        {
                            carName: '阿斯顿·马丁',
                            carType: ['M4','M4(进口)','M5','M6','M7','M8']
                        }
                    ]
                },
                {
                    letter: 'B',
                    carList: [
                        {
                            carName: '别克',
                            carType: ['B4','B4(进口)','A4L','A5','A6','A7','A8']
                        },
                        {
                            carName: '保时捷',
                            carType: ['BS4','A4(进口)','A4L','A5','A6']
                        }
                    ]
                },
                {
                    letter: 'D',
                    carList: [
                        {
                            carName: '大众',
                            carType: ['D4','A4(进口)','A4L','A5']
                        }
                    ]
                },
                {
                    letter: 'F',
                    carList: [
                        {
                            carName: '丰田',
                            carType: ['F4','F4(进口)','A4L']
                        }
                    ]
                }
            ],
            detailActive: -1,
            detailsList: []
        },
        methods: {
            checkType(index,arr) {
                 this.detailActive = -1;
                 this.detailsList = arr[index].carType;
                 this.showDetails = true;
            },
            checkDetails(index){
                this.detailActive = index;
            },
            closeDetails(){
                this.showDetails = false;
            }
        }
    })