vue自定义标题切换带图片

vue项目常用到的标题切换，记录一下，方便下次使用

    <div class="part_title">
        <div class="change-con">
          <!-- 自定义切换 -->
          <p
            class="change"
            v-for="(v, index) in imgs"
            :key="index"
            @click="activeBtn(index)"
          >
            <img v-if="isActive == index" :src="v.urlAcitve" alt="" />
            <img v-else :src="v.url" alt="" />
            <span
              :style="{
                color: isActive == index ? '#EC830F' : '#999999',
              }"
              >{{ v.name }}</span
            >
            <span
              class="underline"
              :style="{
                display: isActive == index ? 'block' : 'none',
              }"
            >
              <el-divider direction="horizontal"></el-divider>
            </span>
          </p>
        </div>
      </div>
return:{
  data(){
    imgs: [
	        {
	          url: require("../../../public/web/icon_huiyuan.png"),
	          urlAcitve: require("../../../public/web/icon_zhifu.png"),
	          name: "支付",
	        },
	        {
	          url: require("../../../public/web/icon_huiyuan.png"),
	          urlAcitve: require("../../../public/web/icon_zhifu.png"),
	          name: "会员",
	        },
	        {
	          url: require("../../../public/web/icon_huiyuan.png"),
	          urlAcitve: require("../../../public/web/icon_zhifu.png"),
	          name: "安全",
	        },
	        {
	          url: require("../../../public/web/icon_huiyuan.png"),
	          urlAcitve: require("../../../public/web/icon_zhifu.png"),
	          name: "基础",
	        },
	        {
	          url: require("../../../public/web/icon_huiyuan.png"),
	          urlAcitve: require("../../../public/web/icon_zhifu.png"),
	          name: "营销",
	        },
      ],
      isActive: 0,
}}

	methods:{
	 activeBtn(val) {
	      console.log(val);
	      this.isActive = val;
	    },
	}



	.part_title {
	  width: 100%;
	  height: 106px;
	  filter: blur(0px);
	  background: #ffffff;
	}
	.change {
	  width: 106px;
	  height: 100%;
	  margin: 0 15px;
	  text-align: center;
	}
	.change img {
	  width: 36px;
	  height: 36px;
	  display: block;
	  margin: 0 auto;
	  margin-top: 18px;
	}
	.change span {
	  display: block;
	  margin: 8px 0;
	  font-size: 20px;
	  /* color: #ec830f; */
	}
	.change-con {
	  width: 1500px;
	  margin: 0 auto;
	  display: flex;
	  justify-content: center;
	}
	.change .underline {
	  width: 100%;
	}
	.underline > .el-divider--horizontal {
	  width: 100%;
	}