点击不同的组件,高亮显示并渲染组件
html结构
通过点击改变样式
<div class="citybutton">
<span class="select-city" :class="{'active':tabActive===0}" @click="tabActive=0">国内</span>
<span class="select-city" :class="{'active':tabActive===1}" @click="tabActive=1">国外</span>
</div>
<div class="city-switch">
<section v-show="tabActive===0">
<foreigncity :citylist="citylist"></foreigncity>
</section>
<section v-show="tabActive===1">
<domesticcity></domesticcity>
</section>
</div>
data绑定数据
data () {
return {
tabActive: 0,
}
}
stylus样式
.select-city
padding: .05rem 0
text-align: center
width: 1.5rem
&.active
background: #fff
默认样式
网友评论