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;
}
}
})