文档章节

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

o
 osc_w9s1w4o0
发布于 2019/03/30 15:41
字数 439
阅读 7
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

有时候,我们在做项目的时候,想通过某个按钮来改变某个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';
                    }
                }

            }

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

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

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
浅入浅出Android(003):使用TextView类构造文本控件

基础: TextView是无法供编辑的。 当我们新建一个项目MyTextView时候,默认的布局(/res/layout/activity_main.xml)中已经有了一个TextView: <TextView 运行效果如下: 修改其文本内容...

樂天
2014/03/22
702
1
程序猿媛一:Android滑动翻页+区域点击事件

滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。文尾附注源码获取途径。 转载请保留原文出处“http://my.oschina.net/gluoyer...

花佟林雨月
2013/11/09
4.3K
1
NSSplitView 扩展--DMSplitView

DMSplitView 对标准的 OS X 的 NSSplitView 控件进行改造,可满足更复杂的要求: 子视图的大小和约束 分隔条位置 可收缩伸展的子视图 动画变换效果 可控制分隔条的粗细和样式 可保存和恢复分...

匿名
2013/01/24
368
0
XLSX读写库--EPPlus

EPPlus 是使用Open Office XML格式(xlsx)读写Excel 2007 / 2010文件的.net开发库。 EPPlus 支持: 单元格范围 单元格样式(Border, Color, Fill, Font, Number, Alignments) Charts 图片 形状...

匿名
2013/02/01
1W
2
Flash 皮肤样式--Windows8UIStyle

Windows8UIStyle 模仿 Windows 8 的桌面用户界面,使得 FlashSwing 应用程序在 Windows 8 系统中拥有与传统应用程序一致的用户界面。 Windows8UIStyle 对 FlashSwing 默认主题的修改: 提供和...

Gregary
2013/02/19
1.3K
1

没有更多内容

加载失败,请刷新页面

加载更多

创建具有列表理解的字典 - Create a dictionary with list comprehension

问题: I like the Python list comprehension syntax. 我喜欢Python列表理解语法。 Can it be used to create dictionaries too? 它也可以用来创建字典吗? For example, by iterating over......

技术盛宴
20分钟前
15
0
从JS数组中删除重复的值[duplicate] - Remove duplicate values from JS array [duplicate]

问题: This question already has answers here : 这个问题已经在这里有了答案 : Get all unique values in a JavaScript array (remove duplicates) (79 answers) 获取JavaScript数组中的......

法国红酒甜
今天
3
0
如何使用AngularJS在浏览器的控制台中访问$ scope变量?

问题: I would like to access my $scope variable in Chrome's JavaScript console. 我想在Chrome的JavaScript控制台中访问$scope变量。 How do I do that? 我怎么做? I can neither see ......

fyin1314
今天
18
0
ImageMagick - 添加水印

背景 最近制作思维导图想添加自己的水印,网上很多例子都是使用ImageMagick来完成。但是不少代码在本地并不可行。经过一番试验,找到两个方法。 方法一 代码 stackoverflow方法改良: conver...

wffger
今天
11
0
OSChina 周四乱弹 —— 到底是怎样的饕餮盛宴在等待着我!

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 小小编辑推荐 :《你 能 來 保 護 我 的 世 界 嘛》- 歪门 《你 能 來 保 護 我 的 世 界 嘛》- 歪门 手机党少年们想听歌,请使劲儿戳(这里)...

小小编辑
今天
77
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部