<div :class="['div',div?'big':'small']" id="div"></div>
<button @click="changediv">按钮</button>
<button @click="changetext">按钮2</button>
.div { background: rebeccapurple; }
.big { width: 200px; height: 200px; }
.small { width: 100px; height: 100px; }
data: {
div: false
},
methods: {
changediv() {
this.div = !this.div;
},
changetext() {
let target = document.querySelector('#div');
target.append('123')
},
},
let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
let target = document.querySelector('#div');
//创建观察者对象
let observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
console.log(mutation)
});
});
//配置观察者选项
let config = {
attributes: true,//检测属性变动
childList: true,//检测子节点变动
characterData: true//节点内容或节点文本的变动。
};
// 传入目标节点和观察选项
observer.observe(target, config);
// 停止观察
observer.disconnect();