需要是这样的,须要做一个点击小标题,切换出绝对应的卡片内容,因为性能很简略不想用插件,所以就手敲了一个,心愿能帮忙到你。
<div id="app">
<ul class="tilte">
<li @click="cur=0" class="column"> 题目一 </li>
<li @click="cur=1" class="column"> 题目二 </li>
<li @click="cur=2" class="column"> 题目三 </li>
</ul>
<div class="content">
<div v-show="cur==0"> 内容一 </div>
<div v-show="cur==1"> 内容二 </div>
<div v-show="cur==2"> 内容三 </div>
</div>
</div>
<script>
export default {data () {
return {cur: 0,// 默认选中第一个值}
}
</script>
如果须要加动静的款式,能够在 class 下面加一个动静的款式,代码如下:
<ul class="tilte">
<li @click="cur=0" :class="{column:cur==0}"> 题目一 </li>
<li @click="cur=1" :class="{column:cur==1}"> 题目二 </li>
<li @click="cur=2" :class="{column:cur==2}"> 题目三 </li>
</ul>
款式的话本人增加吧。