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

原创已于 2022-09-19 09:07:51 修改 · 3.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2021-04-29 15:49:35 首次发布

vue 专栏收录该内容

78 篇文章

订阅专栏

本文介绍如何在Vue中使用事件监听和数据绑定动态控制元素的显示和隐藏状态。通过@click和@mouseleave事件，结合:class指令，实现点击和鼠标离开时切换子元素的display样式。示例代码展示了在父元素循环中，点击触发编辑框的显示和隐藏，离开则隐藏编辑框的功能。

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>