vue获取class的值

问题遇到的现象和发生背景

vue如何获取class的值
vue能动态改变class的值么

vue如何获取class的值

<template>
  <div ref="div" v-bind:class="['div', 1]">{{ result }}</div>
</template>

<script setup>
import { ref } from 'vue'

const result = ref()
const div = ref()
result.value = div.value.className
</script>

<style scoped>

</style>

这样运行结果报错

vue能动态改变class的值么

<template>
  <div v-for="(item, index) in array" :key="index" ref="div" v-bind:class="['div', item]"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue'

const array = ref([])
const div = ref()

onMounted(() => {
  for (let i = 0; i < 10; i++) {
    array.value.push(i)
  }
})
</script>

<style scoped>

</style>

这么写能实现动态切换class么

首先，我告诉你为什么报错
在我的电脑里报错是取不到undifend的classname属性，你的应该也是一样，也就是说在你的代码中div.value为undifend（要自己学会分析报错信息，以及提问时把报错信息带上来），那么为什么它为undefine？
你的代码逻辑没有问题，但是要注意，setup语法糖本质是把代码包裹在setup函数中，而setup函数隶属于vue的生命周期其中之一（类似于option api中的oncreated），而你在setup函数中直接去获取div.value,此时真实dom并没有被渲染，所以它为undifend，具体解决方法可以看我的文章ref详解，文章最后有解释这个现象以及解决方法。
解决了这个问题，你就可以成功获取class了，但是你只能获取div字符串的class，你的1并没有被加入class，这是你的语法问题
如果你想要加入两个固定的class，那么请把两个class放入一个字符串用空格分隔即可，如果你想要添加若干动态class和若干固定class，那么才需要一个数组，数组中第一个元素为字符串，里面是固定class，第二个元素为对象，里面为动态class，这又牵扯到你的第二个问题vue如何动态绑定class，动态class写法为一个对象，键名为你要绑定的class，键值为boolean值，true时此class被加入，false时不被加入
动态绑定class写法：

img

绑定多个class写法：

img

推荐你去找找 相关学习视频 看看学习一下 你这这样碎片时 学习是不行的 效果也不好

vue如何获取class的值？

  1. 使用 $refs 对象
<template>
  <div ref="myDiv" class="my-class">Some content here</div>
</template>

<script>
export default {
  mounted() {
    const myDiv = this.$refs.myDiv
    console.log(myDiv.className) // "my-class"
  }
}
</script>
  1. 使用 Vue 指令
<template>
  <div v-bind:class="'my-class'" ref="myDiv">Some content here</div>
</template>

<script>
export default {
  mounted() {
    const myDiv = this.$refs.myDiv
    console.log(this.$el.className) // "my-class"
  }
}
</script>