02下拉框切换图片

下拉框切换不同图片

1. 页面布局

    <div class="MonthPollution">
      <!-- 定义图片路由变量 -->
      <img :src="ImgUrl" alt="" />
      <!-- 定义响应函数,进行切换图片路由 -->
      <select class="MonthSe" v-model="selected" @change="change">
        <!-- 遍历option数组,通过数组内容决定图片路由 -->
        <option v-for="Month in Months" :key="Month.value" :value="Month.index">
          {{ Month.index }}月份
        </option>
      </select>
    </div>

2. 方法实现

export default {
  name: "Visual",
  data() {
    return {
        //默认路由
      ImgUrl: require("../assets/images/12.png"),
        //option数组,用来切换图片路由
      Months: [
        {index: "1",value: "/images/1.png",},{index: "2",value: "/images/2.png",},
        {index: "3",value: "/images/3.png",},{index: "4",value: "/images/4.png",},
        {index: "5",value: "/images/5.png",},{index: "6",value: "/images/6.png",},
        {index: "7",value: "/images/7.png",},{index: "8",value: "/images/8.png",},
        {index: "9",value: "/images/9.png",},{index: "10",value: "/images/10.png",},
        {index: "11",value: "/images/11.png",},{index: "12",value: "/images/12.png",},
      ],
    };
  },
  methods: {
    change() {
      console.log(this.selected);
      var myUrl = this.Months[this.selected - 1].value;
      console.log(myUrl);
      this.ImgUrl = require("../assets" + myUrl);
    },
};
</script>

3. 实现效果

4. 出现的问题

• 图片路由切换问题

由于切换图片路由时，需要使用require(“path”)，如果path是一个变量，require需要对一个常量进行解析，因此可以采取路径拼接的形式进行绑定。

//之前定义的形式,会导致图片解析错误
Months: [
        {
          index: "1",
          value: "../assets/images/1.png",
        },
    ]
//拿出一部分路径，其他路径通过拼接的形式
Months: [
        {
          index: "1",
          value: "/images/1.png",
        },
    ]

methods: {
    change() {
      console.log(this.selected);
      var myUrl = this.Months[this.selected - 1].value;
      console.log(myUrl);
      //拼接的形式，能够得到正常解析的图片
      this.ImgUrl = require("../assets" + myUrl);
      //会导致解析错误的形式
      this.ImgUrl = require(myUrl);
    },

• select下拉框的使用

v-model是用来获取当前选中对象的value值的，每选一个item，selected会变成item.value，change是下拉框的响应函数，可以通过选中值的不同对data中的变量进行修改，v-for是用来遍历数组，然后定义key和value值

      <select class="MonthSe" v-model="selected" @change="change">
        <option v-for="Month in Months" :key="Month.value" :value="Month.index">
          {{ Month.index }}月份
        </option>
      </select>