vue控制元素样式css的隐藏和显示

vue动态控制元素样式css的隐藏和显示

<template>
    <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>
</templae>
<script>
    export default {
    	data() {
			return {
				isBianji: 0,
			}
		},
        methods: {
           	clickbj(i) {
				console.log(i)
				this.isBianji = i
			},
			mouseLeave(){
				this.isBianji = 0
			},
        }
    }
</script>
<style lang="scss" scoped>
	.box {
		width: 104px;
		height: 64px;
        display: none;
    }
    .disbox{
		display: block;
	}
</style>