vue动态点击切换css样式且子元素动态显示和隐藏

vue动态点击切换css样式并子元素动态显示和隐藏

<template><div v-for="i in 5" class="el-personal" :class="{active:isActive==i}"@click="show(i)">切换css样式<div @click="clickbj(i)"> //i 为父元素 for 循环的 index点击</div><div @mouseleave="mouseLeave(i)" class="box" :class="{disbox:isBianji==i}"><div class="edit" @click="opendep">编辑</div><div class="edit">删除</div></div></div> </template> <script>export default {data() {return {isActive: 0,isBianji: 0,}},methods: {show(i) {this.isActive = i},clickbj(i) {this.isBianji = i},mouseLeave(){this.isBianji = 0},}} </script> <style lang="scss" scoped>.el-personal{width:100px;height:100px;background:red;}.active{background:blue;}.box {width: 104px;height: 64px;display: none;}.disbox{display: block;}</style>

总结

以上是生活随笔为你收集整理的vue动态点击切换css样式且子元素动态显示和隐藏的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。