vue踩坑之路--点击按钮改变div样式

本文详细介绍如何在Vue.js项目中使用按钮控制div元素的样式切换,包括代码示例及其实现步骤。从绑定元素、设置参数到编写方法,一步步展示如何通过点击按钮改变div的样式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

有时候,我们在做项目的时候,想通过某个按钮来改变某个div样式,那么可以通过以下代码实现:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="vue.js"></script>
    <style type="text/css">
        .change {
            width: 500px;
            height: 500px;
            background-color: #4f77aa;
            text-align: center;
            line-height: 100px;
            font-size: 40px;
            color: white;
        }
        
        .changs {
            width: 700px;
            height: 700px;
            background-color: rgb(155, 59, 147);
            text-align: center;
            line-height: 100px;
            font-size: 40px;
            color: white;
        }
    </style>
</head>

<body>
    <div id="demo">

        <div :class="[isActive?'change':'changs']">
            通过点击按钮此处样式会发生改变
        </div>
        <h1 :style="{display:activeDisplay}">
            大家好! 当按钮被点击时,我会和你捉迷藏哦!
        </h1>
        <button @click="changeIt">点击改变</button>

    </div>
    <script type="text/javascript">
        new Vue({
            el: '#demo',
            data: {
                isActive: true,
                activeDisplay: 'block'
            },
            methods: {
                changeIt: function() {
                    this.isActive = !this.isActive;
                    if (this.isActive == true) {
                        this.activeDisplay = 'block';
                    } else {
                        this.activeDisplay = 'none';
                    }
                }

            }

        })
    </script>
</body>

</html>

划重点,我们需要给按钮传入一个方法,所以先要通过<button @click="changeIt">点击改变</button>里的@click="changeIt">来绑定该按钮,并调用changeIt方法,此外,还需要在你想要改变样式的div里做绑定,即<div :class="[isActive?'change':'changs']">通过点击按钮此处样式会发生改变</div>,而想要拉伸div宽度和高度,则需要用到<h1 :style="{display:activeDisplay}">大家好! 当按钮被点击时,我会和你捉迷藏哦!</h1>,此时,你已经做好了第一步,即绑定元素,接下来,我们建立参数和方法,实现这一效果,先在data里写入两个参数并给他们赋值isActive: true,activeDisplay: 'block';然后,我们来写方法:

methods: {
                changeIt: function() {
                    this.isActive = !this.isActive;
                    if (this.isActive == true) {
                        this.activeDisplay = 'block';
                    } else {
                        this.activeDisplay = 'none';
                    }
                }

            }

然后,让我们来看看效果吧!

1489272-20190330154003518-450142033.png

1489272-20190330154016949-797485376.png

好了,现在打开编辑器和浏览器快乐的尝试吧!!!

转载于:https://www.cnblogs.com/ktddcn/p/10627574.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值