Vue 监听元素前后变化值实例
24 浏览量
2020-11-19
20:46:39
上传
评论
收藏 252KB PDF 举报
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
<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 }}
资源评论
weixin_38730129
- 粉丝: 7
- 资源: 927
