//tab拦
<div class="nav1">
          <span v-for="(item, index) in typeList" :key="index" @click="navClick(item.shortName)"
            :class="{actives:flag==item.shortName}">
            {{item.name}}
          </span>
 </div>
//显示数据
  <div class="jk">

        <div class="add" v-if="flag==='tj'">
          <div v-for="(item, index) in List" :key="index" class="add1">
            {{item.tabName}}
            <div class="add2">
              <div v-for="(val, i) in item.list" :key="i" class="aaa" @click="qwer(val)">
                <img :src="val.roomSrc" alt="">
                <p>{{val.roomName}}</p>
              </div>
            </div>
          </div>
        </div>

        <div class="add2" v-else>

          <div v-for="(val, i) in all" :key="i" class="aaa">

            <div>
              <img :src="val.roomSrc" alt="">
              <p>{{val.roomName}}</p>
            </div>

          </div>

        </div>

      </div>

 vuejs代码

const data = reactive({
 tj: [{ name: "推荐", shortName: "tj" }],
        typeList: [],
        flag: "tj",
        List: [],
        page: 1,
 });
 axios.get("cate/recList?cid=&ct=").then((res) => {
        // console.log(res);
        data.typeList = res.data.data
        data.typeList = data.tj.concat(data.typeList)
      });
      axios.get("home/mix").then((res) => {
        // console.log(res);
        data.List = res.data.data
      });

      const navClick = (i) => {
        data.flag = i
        axios.get(`room/list?page=${data.page}&type=${data.flag}`).then((res) => {
          console.log(res.data.data.list);
          data.all = res.data.data.list
        })
      }
return {
        ...toRefs(data), navClick, qwer, show,
        showPopup,
      };

最后

以上就是虚拟大碗最近收集整理的关于vue 使用v-if v- else tab切换数据对应数据方法 vuejs代码的全部内容，更多相关vue内容请搜索靠谱客的其他文章。