需要是这样的,须要做一个点击小标题,切换出绝对应的卡片内容,因为性能很简略不想用插件,所以就手敲了一个,心愿能帮忙到你。
<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>款式的话本人增加吧。