vue 使用v-if v- else tab切换数据对应数据方法 vuejs代码

100 阅读 0 评论 66 点赞

我是靠谱客的博主虚拟大碗，这篇文章主要介绍vue 使用v-if v- else tab切换数据对应数据方法 vuejs代码，现在分享给大家，希望可以做个参考。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//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代码

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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,
      };