Vue 简单实现tab切换效果

最新推荐文章于 2024-08-02 11:00:31 发布

Lguorong

最新推荐文章于 2024-08-02 11:00:31 发布

阅读量1.8k

点赞数 1

文章标签： javascript vue.js html

本文链接：https://blog.csdn.net/Lguorong/article/details/124278167

版权

这篇博客分享了一种不用插件的方法来实现点击小标题切换对应卡片内容的功能。通过Vue.js的数据绑定和事件处理，创建了一个简单的标题列表和内容区域，利用v-show指令动态显示相应的内容。博客还提供了如何添加动态样式以及代码结构，适合初学者理解和实践。

摘要由CSDN通过智能技术生成

需求是这样的，需要做一个点击小标题，切换出相对应的卡片内容，由于功能很简单不想用插件，所以就手敲了一个，希望能帮助到你。

   <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>

样式的话自己添加吧。