Question

我有一些自定义的JQuery代码，可以监听事件并添加一些类来形成元素（焦点，模糊，奇数/偶数等）。没什么大的，但我不想在VueJS中重写所有这些逻辑，因为所有网站只使用JQuery，1页使用VueJS作为复杂形式。

我写了一个指令，用于在新的VueJS元素上启动JQuery代码并且它正在工作。但是在我的情况下，一些VueJS代码（vee-validate指令插件，但它可以是任何VueJS代码）使用v-bind:class更改类。所以它删除了JQuery的类集，它没有添加它取代它们的类...有没有什么方法可以很好地使用VueJS和JQuery / Javascript中的类？让JQuery了解现有的类或其他东西。

由于

Answer 1

您可以使用MutationObserver https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

完成此操作

以下示例将设置一个vuejs应用程序，当单击该应用程序时，将该类从打开更改为关闭，然后通过vue修改类列表。然后，它将设置一个变异观察器来查找类属性的更改，并运行一些更多的jquery来检查类makeBold类是否在类列表中，如果没有添加它。

这表明vue正在控制元素类列表，观察者通过执行一些jquery来对更改做出反应

另外我添加了一个复选框来禁用oberserver反应以显示vue正在删除makeBold类

＆＃13;

const app = new Vue({
  el: '#app',
  data() {
    return {
      on: true
    }
  }
})
const node = document.getElementById('app')
// add bold class with jQuery
$('#app').addClass('makeBold')

const observer = new MutationObserver(mutations => {
  if ($('#cbx').prop('checked')) return
  const changes = mutations
    .filter(({ attributeName }) => attributeName === 'class');
  if (changes.length && !$('#app').hasClass('makeBold')) {
    $('#app').addClass('makeBold')
  }
})

observer.observe(node, { attributes: true })

＆＃13;

.on {
  background-color: orange;
}

.off {
  background-color: white;
}
.makeBold {
  font-weight: 600;
}
.appBody {
  height: 100px;
  border: 1px solid #000;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app" class="appBody" :class="{ 'on': on, 'off': !on }" @click="on=!on">
  Click Me
</div>
<input type="checkbox" id="cbx"> Disable Observer reaction

＆＃13;

VueJS和JQuery更改类

1 个答案: