监听div发生过改变的方法

<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();

 

上一篇:jzoj4313 电话线铺设(最小生成树+最近公共祖先)


下一篇:观察者模式