Vue选项卡

    <div id="app">
        <div class="tabs">
            <ul class="tab flex">
                <li @click="activeIndex=index" 
                :class="{active:activeIndex===index}" 
                v-for="(item,index) in data">{{item.title}}</li>
            </ul>
            <ul class="content">
                <li v-show="activeIndex===index" 
                v-for="(item,index) in data">{{item.content}}</li>
            </ul>
        </div>
    </div>

new Vue({
    el:"#app",
    data() {
          return {
                //高亮索引
                activeIndex:0,
                data:[{
                    title:"中国",
                    content:"中国的乒乓球很厉害"
                 },{
                     title:"美国",
                     content:"美国的篮球很厉害"
                  },{
                      title:"德国",
                      content:"德国的汽车质量很棒"
                  },{
                       title:"英国",
                       content:"英国的天气变化无常"
                  }]
               }
            },
        })

标签：Vue,选项卡,title,厉害,content,item,data
来源： https://blog.csdn.net/weixin_48912846/article/details/114677195