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

                    }

                }

            }

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

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

vue踩坑之路--点击按钮改变div样式的更多相关文章

  1. VUE踩坑之路

    一.常见报错 1.vue-cli-service 不是内部或外部命令,也不是可运行程序 解决方案: 用以下命令安装Vue CLI就好 npm install -g @vue/cli # OR yarn ...

  2. 二、JavaScript之点击按钮改变HTML样式 (CSS)

    一.代码如下 二.点击前 三.点击后 <!DOCTYPE html> <html> <meta http-equiv="Content-Type" c ...

  3. 点击按钮改变div背景色，再次点击恢复 -- 原生JS

    如果对您有帮助,记得点个赞哦!

  4. html2canvas的踩坑之路

    html2canvas的踩坑之路 前言 早有耳闻这个html2canvas比较坑,但无奈于产品需求的压迫,必须实现html转图片的功能,自此走上了填坑之路,好在最后的效果还算令人满意,这才没有误了产品 ...

  5. Android 上传开源项目到 jcenter 实战踩坑之路

    本文微信公众号「AndroidTraveler」首发. 背景 其实 Android 上传开源项目到 jcenter 并不是一件新鲜事,网上也有很多文章. 包括我本人在将开源项目上传到 jcenter ...

  6. Vue 爬坑之路（九）—— 用正确的姿势封装组件

    迄今为止做的最大的 Vue 项目终于提交测试,天天加班的日子终于告一段落... 在开发过程中,结合 Vue 组件化的特性,开发通用组件是很基础且重要的工作 通用组件必须具备高性能.低耦合的特性 为了满 ...

  7. Vue 爬坑之路（六）—— 使用 Vuex + axios 发送请求

    Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...

  8. vue踩坑记

    vue踩坑记 易错点 语法好难啊qwq 不要把'data'写成'date' 在v-html/v-bind中使用vue变量时不需要加变量名 在非vue事件中使用vue中变量时需要加变量名 正确 < ...

  9. Vue 爬坑之路（一）—— 使用 vue-cli 搭建项目

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli vue ...

随机推荐

  1. Android利用Volley异步载入数据完整具体演示样例(二)

    MainActivity例如以下: package cc.y; import android.app.Activity; import android.content.Context; import ...

  2. LeetCode 648. Replace Words (单词替换)

    题目标签:HashMap 题目给了我们一个array 的 root, 让我们把sentence 里面得每一个word 去掉它得 successor. 把每一个root 存入hash set,然后遍历s ...

  3. jeasyui-datagrid使用笔记

    formatter转换ID为值 设置字典缓存 var DictionaryItem = {}; $.post('/Dictionary/GetDictionary/T_RKXD', function ...

  4. singlefile.py

    #! encoding=utf-8 import os import os.path AllFiles = {} MinSize = 8100 def OneDir( DirName ): if Di ...

  5. linux C函数之strdup函数分析【转】

    本文转载自:http://blog.csdn.net/tigerjibo/article/details/12784823 linux C函数之strdup函数分析 一.函数分析 1.函数原型: #i ...

  6. 深入理解7816（3）-----关于T=0 【转】

    本文转载自:http://blog.sina.com.cn/s/blog_4df8400a0102vcyp.html 深入理解7816(3)-----关于T=0 卡片和终端之间的数据传输是通过命令响应 ...

  7. E20170621-hm

    detroit  底特律 giant   n. 巨人,大汉; 巨兽,巨物; 卓越人物 woo    vt. 求爱,求婚; 争取…的支持; convince   vt. 使相信,说服,使承认; 使明白; ...

  8. 在网页上打印，js window.print

    window.print默认会打印出当前页在屏幕中显示的部分,可以实现在线打印

  9. 关于 node.js的request事件

    下面展示的是一个ajax一部提交的服务器端处理过程.node创建一个web服务器,并侦听8080端口.对于服务器,我们为其绑定了request事件,对于请求对象,我们为它绑定了data和end事件: ...

  10. Akka源码分析-官方文档说明

    如果有小伙伴在看官方文档的时候,发现有些自相矛盾的地方,不要怀疑,可能是官方文档写错了或写的不清楚,毕竟它只能是把大部分情况描述清楚.开源代码一直在更新,官方文档有没有更新就不知道了,特别是那些官方不 ...