vue 应用:class的元素, 在js中注入classList.add方法被覆盖

Question

请教:
vue 应用:class的元素, 在js中注入classList.add方法的类名被:class覆盖

Answer 1

<template>
  <div
    v-test
    :class="{ test: test > 0.5 }"
    style="width: 100px; height: 100px; background-color: red"
  ></div>
</template>
<script>
export default {
  name: "App",
  mounted() {
    setInterval(() => (this.test = Math.random()), 1000);
  },
  data() {
    return { test: Math.random() };
  },
  directives: {
    test: {
      inserted: function (el) {
        console.log("inserted el", el);
        el.classList.add("test1");
      },
      // 当被绑定的元素插入到 DOM 中时……
      componentUpdated: function (el) {
        console.log("componentUpdated el", el);
        // 聚焦元素
        // el.focus();
        el.classList.add("test1");
      },
    },
  },
};
</script>

hook componentUpdated

Answer 2

不要把数据绑定和操作dom混着用