这篇文章主要介绍了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
<div class="sidebar"> <!-- 折叠按钮 --><div class="collapse-btn"> <i class="el-icon-d-arrow-left" title="收起"> <small>收缩侧边栏</small></i><i class="el-icon-d-arrow-right" title="展开"></i></div> <i></i><span>{{ item.title }}</span> <i></i> {{ subItem.title }} {{ threeItem.title }} <i></i> {{ subItem.title }} <i></i><span>{{ item.title }}</span><div> <i class="el-icon-d-arrow-right" title="展开"></i></div></div>
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%; /*写给不支持calc()的浏览器*/ height: calc(100% - 52px); <strong style="color:transparent">来2源gaodaima#com搞(代@码&网</strong>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; } /* .collapse-btn:before{ content: ""; display: block; height: 0; border-top: 1px dotted #909399; position: absolute; left: 15px; right: 15px; top: 18px; } */
##注意⚠️
此开发框架是github 名为 lin-xin 的 vue-manage-system
因公司项目需要兼容iPad，故而修改
详细代码点击这里
以上这篇Vue 监听元素前后变化值实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持gaodaima搞代码网。
以上就是Vue 监听元素前后变化值实例的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue 监听元素前后变化值实例
转载请注明原文链接：Vue 监听元素前后变化值实例
