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

@-小飞

已于 2022-02-28 20:04:15 修改

阅读量387

点赞数 1

文章标签： vue.js javascript 前端

于 2022-02-28 20:03:45 首次发布

本文链接：https://blog.csdn.net/m0_64531353/article/details/123190717

版权

这篇博客探讨了如何在VueJS中实现动态导航栏和数据渲染。通过`v-for`指令遍历数据列表，根据`flag`状态切换显示不同内容。`navClick`函数用于切换导航项，并获取相应类型的数据。同时展示了如何使用`axios`进行API调用来获取并更新数据。

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

//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,
      };