vue点击下拉框选择不同选项出现不同内容--接口对接数据变换

实现效果：

点击下拉框的三种选项，左侧通过后端传递的数值会发生变化，右侧的名称会变成下拉选项的名称。

1.tempalte中

<LittleTitle name="空天数据系统" />
            <div class="sky-top">
              <el-select v-model="skyDataType">
                <el-option
                  v-for="item in skyDataTypeOptions"
                  :key="item.skyDataTypeValue"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <div class="sky-one">
              <div class="sky-one-left">
                <span class="sky-data-b">{{ imageDataTotal.volume }}</span>
                <span class="sky-data">{{ imageDataTotal.unit }}</span>
              </div>
              <div class="sky-one-right">
                <div class="sky-word-box">
                  //通过v-model中的value值绑定在右侧框框的名称上
                  {{ skyDataType }}数据总量
                  <br />
                  //后端传递过来的数据
                  {{ imageDataTotal.updateTime.slice(0, 19) }}
                </div>
              </div>
            </div>
            <div class="sky-two">
              <div class="sky-two-left">
                 //后端传递过来的数据
                <span class="sky-data-b">{{ imageDataTotal.number }}</span>
                <span class="sky-data">条</span>
              </div>
              <div class="sky-two-right">
                <div class="sky-word-box">
                 //通过v-model中的value值绑定在右侧框框的名称上
                  {{ skyDataType }}数据总条目
                  <br />
                  //后端传递过来的数据
                  {{ imageDataTotal.updateTime.slice(0, 19) }}
                </div>
              </div>
            </div>

2.data中

 data() {
    return {
      skyDataType: "影像",//默认为影像的数据
      skyDataTypeValue: "",
      skyDataTypeOptions: [
        {
          value: "影像",
          label: "影像数据统计"
        },
        {
          value: "矢量",
          label: "矢量数据统计"
        },
        {
          value: "地形",
          label: "地形数据统计"
        }
      ],
     }
}

3.设置监听，监听skyDataType中不同类型的变化

watch: {
    skyDataType: {
      handler: function(newV) {
      //一般有两个参数值，newV和oldValues，分别获取更新后的新值和更新后的旧值
      //执行getDataTotal方法
        this.getDataTotal(newV);
      },
      immediate: true//立即执行
    }
  },
}

4.methods中：

 //请求影像数据总量数据
    getDataTotal(type) {
     //type为监听中传来的形参newV
      getDataTotalVolumeAndNumber(type, 0)
        .then(res => {
          this.setTotalData(res);
        })
        .catch(() => {
          this.imageDataTotal = { volume: 0, number: 0, updateTime: "-" };
        });
    },

这样就实现的上述效果。

样式部分代码不在展示。