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


Posted in Javascript onJuly 29, 2020

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

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响应式显示

效果

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

代码

template

<template>
 <div class="sidebar">
 <!-- 折叠按钮 -->
 <div class="collapse-btn" @click="collapseChage">
 <i class="el-icon-d-arrow-left" v-show="!collapse" title="收起">
   
 <small>收缩侧边栏</small>
 </i>
 <i class="el-icon-d-arrow-right" v-show="collapse" title="展开"></i>
 </div>
 <el-menu
 class="sidebar-el-menu"
 :default-active="onRoutes"
 :collapse="collapse"
 text-color="#8d9199"
 active-text-color="#20a0ff"
 unique-opened
 router
 >
 <template v-for="item in items">
 <template v-if="item.subs">
  <el-submenu :index="item.index" :key="item.index">
  <template slot="title">
  <i :class="item.icon"></i>
  <span slot="title">{{ item.title }}</span>
  </template>
  <template v-for="subItem in item.subs">
  <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
  <template slot="title">
   <i :class="subItem.icon"></i>
   {{ subItem.title }}
  </template>
  <el-menu-item
   v-for="(threeItem,i) in subItem.subs"
   :key="i"
   :index="threeItem.index"
  >{{ threeItem.title }}</el-menu-item>
  </el-submenu>
  <el-menu-item v-else :index="subItem.index" :key="subItem.index">
  <i :class="subItem.icon"></i>
  {{ subItem.title }}
  </el-menu-item>
  </template>
  </el-submenu>
 </template>
 <template v-else>
  <el-menu-item :index="item.index" :key="item.index">
  <i :class="item.icon"></i>
  <span slot="title">{{ item.title }}</span>
  </el-menu-item>
 </template>
 </template>
 </el-menu>
 <div>
 <i class="el-icon-d-arrow-right" v-show="collapse" title="展开"></i>
 </div>
 </div>
</template>

javascript

<script>
import bus from "./bus";
import { menu } from "../../data/menu";

export default {
 data() {
 return {
 collapse: false,
 items: menu,
 screenWidth: 1000
 };
 },
 computed: {
 onRoutes() {
 return this.$route.path.replace("/", "");
 }
 },
 created() {
 // 通过 Event Bus 进行组件间通信,来折叠侧边栏
 bus.$on("collapse", msg => {
 this.collapse = msg;
 });
 },
 mounted() {
 // if (document.body.clientWidth < 1500) {
 // this.collapseChage();
 // }
 const that = this;
 window.addEventListener("resize", function() {
 return (() => {
 window.screenWidth = document.body.clientWidth;
 that.screenWidth = window.screenWidth;
 })();
 });
 },
 watch: {
 screenWidth(val) {
 if (!this.timer) {
 this.screenWidth = val;
 this.timer = true;
 let that = this;
 setTimeout(function() {
  // that.screenWidth = that.$store.state.canvasWidth
  console.log(that.screenWidth);
  that.auto();
  that.timer = false;
 }, 400);
 }
 }
 },
 methods: {
 // 侧边栏折叠
 collapseChage() {
 this.collapse = !this.collapse;
 bus.$emit("collapse", this.collapse);
 },
 auto() {
 if (this.screenWidth < 1200) {
 console.log("收起来");
 this.collapse = true;
 bus.$emit("collapse", true);
 } else {
 console.log("展开");
 this.collapse = false;
 bus.$emit("collapse", false);
 }
 }
 }
};
</script>

css

<style scoped>
.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);
 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;
 } */
</style>

##注意⚠️

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

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

详细代码点击这里

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

Javascript 相关文章推荐
js 图片等比例缩放代码
May 13 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
May 28 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
AngularJS轻松实现双击排序的功能
Aug 30 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
小程序server请求微信服务器超时的解决方法
May 21 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 Javascript
使用eslint和githooks统一前端风格的技巧
Jul 29 #Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 #Javascript
小程序实现列表展开收起效果
Jul 29 #Javascript
jquery实现简单自动轮播图效果
Jul 29 #jQuery
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 #Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 #Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 #Javascript
You might like
PHP define函数的使用说明
2008/08/27 PHP
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
AngularJS ng-change 指令的详解及简单实例
2016/07/30 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
JavaScript判断浏览器及其版本信息
2017/01/20 Javascript
Js apply方法详解
2017/02/16 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
学习jQuery中的noConflict()用法
2018/09/28 jQuery
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
python自动发送邮件脚本
2018/06/20 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
Python分析微信好友性别比例和省份城市分布比例的方法示例【基于itchat模块】
2020/05/29 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
办公室员工岗位工作职责
2014/03/10 职场文书
网络信息安全承诺书
2014/03/26 职场文书
电工技术比武方案
2014/05/11 职场文书
新娘婚礼致辞
2015/07/27 职场文书
Python中super().__init__()测试以及理解
2021/12/06 Python
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS