原生js怎么和vue的:class一样动态添加class名

在原生JS中，我们可以使用 `classList` 属性来动态添加class名。

例如，假设我们有一个按钮元素，我们想要动态添加一个 `active` class名：

<button id="myButton">Click me</button>

我们可以通过以下代码添加 `active` class名：

const button = document.getElementById('myButton');
button.classList.add('active');

在Vue中，我们可以使用 `v-bind:class` 指令来动态绑定class名。

例如，我们可以绑定一个 `isActive` 计算属性来控制是否添加 `active` class名：

<template>
  <button :class="{ active: isActive }">Click me</button>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  },
  computed: {
    isActive() {
      // 计算是否添加 active class名的逻辑
      return this.someCondition === true;
    }
  }
}
</script>

相关问题

原生js怎么和vue的:class一样在行内动态添加class名

在原生JS中，可以通过在元素节点的`classList`属性上调用`add`方法来动态添加class名。例如，假设我们有一个元素节点`el`，我们可以使用以下代码将一个名为"active"的class名添加到该元素中：

el.classList.add("active");

如果要在Vue中动态添加class名，可以使用`v-bind:class`指令。例如，假设我们有一个Vue组件，并且希望根据组件的`isActive`属性动态添加一个名为"active"的class名，可以使用以下代码：

<template>
  <div :class="{ active: isActive }">...</div>
</template>

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

在上面的代码中，我们使用了对象语法来绑定class名。该对象的属性名是要添加的class名，属性值是一个布尔值，表示该class名是否应该被添加。在本例中，当`isActive`属性为`true`时，"active" class名将被添加到该元素中。

原生js 设置子组件中的 class ，父组件如何监听vue是否渲染完成

如果你想在父组件中监听子组件是否渲染完成，可以使用`$nextTick()`方法来实现。

在父组件中，你可以使用`$nextTick()`方法来等待子组件渲染完成。然后，你可以访问子组件的DOM元素，并设置它的class。

下面是一个例子：

// 父组件
Vue.component('parent-component', {
  template: `
    <div>
      <child-component ref="child"></child-component>
    </div>
  `,
  mounted() {
    // 在下次DOM更新循环结束后执行
    this.$nextTick(function() {
      // 获取子组件的DOM元素
      var childElement = this.$refs.child.$el;
      // 设置子组件的class
      childElement.classList.add('my-class');
    });
  }
});

// 子组件
Vue.component('child-component', {
  template: '<div>子组件</div>'
});

在上面的例子中，我们在父组件中使用了`$nextTick()`方法来等待子组件渲染完成。然后，我们通过`this.$refs.child.$el`访问了子组件的DOM元素，并设置了它的class。

请注意，`$nextTick()`方法是异步的，因此它不会阻塞代码的执行。如果你需要在子组件渲染完成后立即执行某些操作，你可以将这些操作放在回调函数中。