vue3 class判断是否有isActive 然后改变img图片地址

在 Vue 3 中，可以使用以下方式来判断一个元素是否有指定的 class 并改变 img 图片地址：

1. 使用对象方式绑定 class，对象的属性名是类名，属性值是一个表达式，该表达式的值为 true 或 false，如果该表达式的值为 true，则该元素会添加该类，否则不添加。

例如，判断一个元素是否有名为 "isActive" 的类，并根据其值来改变 img 图片地址：

<template>
  <div :class="{ isActive: hasActiveClass }">
    <img :src="imageUrl" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      hasActiveClass: true,
      imageUrl: 'https://example.com/image1.jpg'
    }
  },
  methods: {
    changeImageUrl() {
      if (this.hasActiveClass) {
        this.imageUrl = 'https://example.com/image2.jpg'
      } else {
        this.imageUrl = 'https://example.com/image1.jpg'
      }
    }
  }
}
</script>

其中，hasActiveClass 是一个在 Vue 实例中的 data 中定义的布尔值，如果它的值为 true，则该元素会添加 "isActive" 类。

当 hasActiveClass 的值改变时，可以调用 changeImageUrl 方法来改变 img 的图片地址。

2. 使用 ref 和 $el.classList.contains() 方法判断一个元素是否包含指定的类，并根据其值来改变 img 图片地址。

例如，判断一个元素是否有名为 "isActive" 的类，并根据其值来改变 img 图片地址：

<template>
  <div ref="myDiv">
    <img :src="imageUrl" />
  </div>
</template>

<script>
export default {
  mounted() {
    if (this.$refs.myDiv.classList.contains('isActive')) {
      this.imageUrl = 'https://example.com/image2.jpg'
    } else {
      this.imageUrl = 'https://example.com/image1.jpg'
    }
  },
  data() {
    return {
      imageUrl: 'https://example.com/image1.jpg'
    }
  }
}
</script>

其中，this.$refs.myDiv 表示一个指向该元素的引用，可以使用 $el 属性来访问该元素的 DOM 对象。当该元素的类名发生变化时，可以通过重新调用 mounted 方法来判断该元素是否包含指定的类并根据其值来改变 img 的图片地址。