Vue 监听元素前后变化值实例

我就废话不多说了，大家还是直接看代码吧~

export default {
 data() {
 return {
  item: ''
 }
 },
 watch: {
 item(now, before){
  let remove = before.filter(x => now.indexOf(x) == -1);
  let add = now.filter(x => before.indexOf(x) == -1);
  
  console.log(add, remove);
 }
 }
}

补充知识：Vuejs+Element监听-window.resize-el-menu响应式显示

效果

代码

template

javascript

css

.sidebar {
 z-index: 1024;
 display: block;
 position: fixed;
 left: 0;
 top: 70px;
 bottom: 0;
 overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
 width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
 width: 200px;
}
.sidebar > ul {
 height: 100%; 
 height: calc(100% - 52px);
 top: 30px;
 background-color: rgb(235, 239, 243);
 border-top: 1px solid #d6d6d6;
}
.sidebar > ul > li,
.sidebar > ul > li div {
 background-color: rgb(235, 239, 243);
}
.sidebar > ul > li > ul {
 background-color: rgb(235, 239, 243);
}
.el-menu {
 background-color: rgb(235, 239, 243);
}
i {
 margin-right: 10px;
}
.collapse-btn {
 height: 30px;
 width: 100%;
 cursor: pointer;
 line-height: 30px;
 position: absolute;
 top: 0;
 left: 0;
 background-color: #f4f6fa;
 color: #fff;
 text-align: center;
 overflow: hidden;
 box-sizing: border-box;
 box-shadow: 0 5px 10px #ddd;
}
.collapse-btn i {
 color: #8d9199;
 padding: 1px;
 cursor: pointer;
 overflow: hidden;
 text-overflow: ellipsis;
}

##注意⚠️

此开发框架是github 名为 lin-xin 的 vue-manage-system

因公司项目需要兼容iPad，故而修改

详细代码点击这里

以上这篇Vue 监听元素前后变化值实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。