vue 三級聯動（樣式自定義）

最近因為項目需求，需要寫一個三級聯動，樣式還需要自定義，所以在這邊記錄一下筆記。

首先布局，先布局一級的數據。

 <div class="type">
      <label class="type-tltle">星期：</label>
      <div class="style">
        <label  class="type-list"
          v-for="(item, index) in firstList"
          :class="{ green_title: IsFirst === index }"
          :key="item.id"

            @click="IsFirst = index">{{ item.text }}</ label>

          </div>

    </div>

 return {
      IsFirst: 0,    //這邊默認為0 ，讓第一個數據的樣式變色
      firstList: [
        {id: 1,text: "星期一"},
        {id: 2,text: "星期二" },
        {id: 3,text: "星期三"},
        { id: 3,text: "星期四"},
        { id: 3, text: "星期五"}
      ]
    };

這樣子一級的就一級寫好了。

 

 

 接着寫二級的數據，布局還是跟一級的一樣，只不過綁定這塊變了。這邊的 v-for綁定是根據一級的數據來的，所以在v-for上是從第一級的第一個元素開始變化的，

 然后第一級數據在第二級的外面，所以，第二個v-for是需要這樣子綁定的 ，v-for="(item, index) in firstList[IsFirst].secondList"

 

 

 

 

 

 然后在綁定數據這塊，是在一級的基礎上在加一個數組。

 

 

 

然后在一級的點擊事件和二級的點擊事件需要串聯起來。

第一級的點擊事件里面，第二級的默認元素為0，是跟着第一級的變化而變化的。

 

 

 

這樣子第二級的聯動也是寫好了。

 

 

最后就寫第三級的數據和數據 綁定了。第三級的綁定，是在第二級的綁定基礎上在進行綁定，第二級的默認數據，在第一級的基礎上，

第三級的也是在第二級的基礎是，需要串聯起來，所以，第三級的v-for需要這樣子綁定。

  v-for="(item, index) in firstList[IsFirst].secondList[IsSecond].thireList"

 

 

 

 

 然后在return里面，就是在第二級的基礎上，在新增數據。

 

 

 然后第三級的點擊事件，就是這樣子的。

完整代碼：

<template>
  <div class="video-type">
    <div class="type">
      <label class="type-tltle">星期：</label>
      <div class="style">
        <label
          class="type-list"
          v-for="(item, index) in firstList"
          :class="{ green_title: IsFirst === index }"
          :key="item.id"
          @click="IsFirst = index"
          >{{ item.text }}</label
        >
      </div>
    </div>
    <div class="type">
      <label class="type-tltle">天氣：</label>
      <div class="style">
        <label
          class="type-list"
          v-for="(item, index) in firstList[IsFirst].secondList"
          :class="{ green_title: IsSecond === index }"
          :key="item.id"
          @click="secondChange(index)"
          >{{ item.text }}</label
        >
      </div>
    </div>
    <div class="type">
      <label class="type-tltle">氣溫：</label>
      <div class="style">
        <label
          class="type-list"
          v-for="(item, index) in firstList[IsFirst].secondList[IsSecond]
            .thireList"
          :class="{ green_title: IsSecond === index }"
          :key="item.id"
          @click="thirdChange(index)"
          >{{ item.text }}</label
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      IsFirst: 0,
      IsSecond: 0,
      IsThired: 0,
      firstList: [
        {
          id: 1,
          text: "星期一",
          secondList: [
            {
              id: 2,
              text: "下雨",
              thireList: [{ id: 1, text: "16.5℃" }]
            },
            {
              id: 3,
              text: "晴天",
              thireList: [{ id: 11, text: "16.5℃" }]
            },
            {
              id: 4,
              text: "陰天",
              thireList: [{ id: 111, text: "18.5℃" }]
            },
            {
              id: 5,
              text: "大雨",
              thireList: [{ id: 11111, text: "20.5℃" }]
            },
            {
              id: 2,
              text: "多雲",
              thireList: [{ id: 1, text: "22.5℃" }]
            }
          ]
        },
        {
          id: 2,
          text: "星期二",
          secondList: [
            {
              id: 2,
              text: "下雨",
              thireList: [{ id: 1, text: "16.5℃" }]
            },
            {
              id: 2,
              text: "晴天",
              thireList: [{ id: 1, text: "16.5℃" }]
            },
            {
              id: 2,
              text: "陰天",
              thireList: [{ id: 1, text: "18.5℃" }]
            },
            {
              id: 2,
              text: "大雨",
              thireList: [{ id: 1, text: "20.5℃" }]
            },
            {
              id: 2,
              text: "多雲",
              thireList: [{ id: 1, text: "22.5℃" }]
            }
          ]
        },
        {
          id: 3,
          text: "星期三",
          secondList: [
            {
              id: 2,
              text: "下雨",
              thireList: [{ id: 1, text: "16.5℃" }]
            },
            {
              id: 2,
              text: "晴天",
              thireList: [{ id: 1, text: "22℃" }]
            },
            {
              id: 2,
              text: "陰天",
              thireList: [{ id: 1, text: "33℃" }]
            },
            {
              id: 2,
              text: "大雨",
              thireList: [{ id: 1, text: "16℃" }]
            },
            {
              id: 2,
              text: "多雲",
              thireList: [{ id: 1, text: "20.5℃" }]
            }
          ]
        },
        {
          id: 3,
          text: "星期四",
          secondList: [
            {
              id: 2,
              text: "下雨",
              thireList: [{ id: 1, text: "18.5℃" }]
            },
            {
              id: 2,
              text: "晴天",
              thireList: [{ id: 1, text: "35.5℃" }]
            },
            {
              id: 2,
              text: "陰天",
              thireList: [{ id: 1, text: "23.5℃" }]
            },
            {
              id: 2,
              text: "大雨",
              thireList: [{ id: 1, text: "10.5℃" }]
            },
            {
              id: 2,
              text: "多雲",
              thireList: [{ id: 1, text: "22.5℃" }]
            }
          ]
        },
        {
          id: 3,
          text: "星期五",
          secondList: [
            {
              id: 2,
              text: "下雨",
              thireList: [{ id: 1, text: "20.5℃" }]
            },
            {
              id: 2,
              text: "晴天",
              thireList: [{ id: 1, text: "30.5℃" }]
            },
            {
              id: 2,
              text: "陰天",
              thireList: [{ id: 1, text: "26.5℃" }]
            },
            {
              id: 2,
              text: "大雨",
              thireList: [{ id: 1, text: "25.5℃" }]
            },
            {
              id: 2,
              text: "多雲",
              thireList: [{ id: 1, text: "20.5℃" }]
            }
          ]
        }
      ]
    };
  },
  methods: {
    FirstChange(index) {
      this.IsFirst = index;
      this.IsSecond = 0;
    },
    secondChange(index) {
      this.IsSecond = index;
      this.IsThird = 0;
    },
    thirdChange(index) {
      this.IsThird = index;
    }
  }
};
</script>

<style lang="less" scoped>
.video-type {
  display: block;
  background: #fff;
  width: 71.87vw;
  margin: 30px auto;
  .type {
    display: block;
    .type-tltle {
      font-weight: bold;
      font-size: 14px;
      color: #333333;
      padding: 15px 24px 0px 20px;
      display: inline-block;
    }

    &:last-child {
      padding-bottom: 16px;
    }
    .style {
      display: inline-block;
      .type-list {
        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        color: #666666;
        margin-left: 24px;
        &:first-child {
          margin-left: 0;
        }
      }
      .green_title {
        color: #27ae60;
      }
    }
  }
}
</style>

效果圖：