vue制作简单的tab栏

html部分

<div class="box">
      <div class="title">
        <div v-for="(title,i) in title"  v-on:click="idx(i)"  v-bind:class="{colors:i==num}">
            <!-- 
                v-for把title标题循环渲染出来
                v-on：click设置点击事件，点击到的时候就获取相对应内容的下标
                v-bind设置类名，如果点到相对应的东西就增添类名
            -->
          {{title}}
        </div>
      </div>
      <div class="text" v-for="(text,i) in text" v-if="i==num">{{text}}</div>
      <!-- 
          v-for循环把相对应的内容渲染出去，并且做个判断点击到相对应的下标时内容渲染
       -->
    </div>

vue部分

new Vue({
        el: ".box",
        data: {
          title: ["标题一", "标题二", "标题三"],
        //   将标题
          text: ["内容一", "内容二", "内容三"],
        //   内容
          num: 0,
        //   下标
        },
        methods: {
          idx(i) {
            this.num = i;
            // 让num赋值就等于当前下标
          },
        },
      });

成果