vue3 判断某个div 是否含类名on

Vue3 中判断某个 div 是否含有特定 class 名 "on" 的方法通常涉及模板语法或者 JavaScript。你可以使用 Vue.js 的 `v-bind:class` 或者直接操作元素的 `classList` 属性。以下是两种常见的方式：

1. 使用 v-bind:class:

<div :class="{ on: hasClass }">...</div>

然后在你的 Vue 实例中设置 `hasClass` 的值：

export default {
  data() {
    return {
      hasClass: false, // 设置初始状态
    };
  },
  methods: {
    checkClass(targetDiv) {
      if (targetDiv.classList.contains('on')) {
        this.hasClass = true;
      } else {
        this.hasClass = false;
      }
    },
  },
  mounted() {
    this.checkClass(this.$refs.yourDiv); // 需要确保 div 具有 ref 并传递给该方法
  },
};

2. 直接在 JavaScript 中操作：

const targetDiv = document.querySelector('.your-div'); // 替换为实际选择器
if (targetDiv.classList.contains('on')) {
  // do something
}

如果你想在每次数据变化时检查这个类名，可以将判断逻辑放入 computed 或 watch 属性中。