vue3 用js控制deep的css

要使用 JavaScript 控制 Vue3 中的深层次（deep）CSS，你可以通过以下几种方式实现：

1. 使用动态绑定的方式：在 Vue3 中，你可以使用类似于 Vue2 的绑定语法，通过动态绑定 CSS 类或内联样式来控制元素的样式。

<template>
  <div :class="{ 'deep-css': isDeep }"></div>
</template>

<script>
export default {
  data() {
    return {
      isDeep: true
    };
  }
}
</script>

<style scoped>
.deep-css {
  /* 深层次的 CSS 样式 */
}
</style>

在上述示例中，`isDeep` 是一个布尔值，当其为 `true` 时，元素会应用名为 `deep-css` 的 CSS 类，从而控制深层次的样式。

2. 使用计算属性（Computed Properties）：你可以使用计算属性来根据组件中的数据来动态计算 CSS 类或内联样式。

<template>
  <div :class="deepClass"></div>
</template>

<script>
export default {
  data() {
    return {
      isDeep: true
    };
  },
  computed: {
    deepClass() {
      return this.isDeep ? 'deep-css' : '';
    }
  }
}
</script>

<style scoped>
.deep-css {
  /* 深层次的 CSS 样式 */
}
</style>

在上述示例中，`deepClass` 是一个计算属性，它将根据 `isDeep` 的值来动态返回一个 CSS 类名。

这些方法可以让你在 Vue3 中使用 JavaScript 控制深层次的 CSS。你可以根据实际需求选择其中一种方式来实现。