有时候，我们在做项目的时候，想通过某个按钮来改变某个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. Mysql net start mysql启动,提示发生系统错误 5 拒绝訪问 解决之道

    当前用户的操作权限太低了,出了问题 出错问题截屏例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/4 ...

  2. libcurl库进行http通讯-一些主要的函数

    这里就简介一下libcurl的一些主要的函数. 调用curl_global_init()初始化libcurl 调用curl_easy_init()函数得到 easy interface型指针 调用cu ...

  3. VIM学习笔记 比较文件(diff)

    比较 可以从命令行调用以下命令,来打开两个文件进行比较: vim -d file1 file2 如果已经打开了文件file1,那么可以在Vim中用以下命令,再打开另一个文件file2进行比较: :di ...

  4. 浅析js的函数的按值传递参数

    js的函数传参的方式是按值传递,正常情况下,改变函数参数的值,并不会对函数外部的变量造成影响.例如: 'use strict';var list = [1, 2, 3]; list.forEach(f ...

  5. unique(V.begin(),V.end())

    unique(V.begin(),V.end()) 重排容器算法:sort,unique unique  返回指向不重复区域之后一个位置的迭代器 ///删除vstr中重复的元素 void delete ...

  6. hdu 6201(最小费用最大流)

    transaction transaction transaction Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 132768/1 ...

  7. P1402 酒店之王 网络流

    大水题,我自己瞎做就做出来了,没啥说的,zz建图,就是板子. 题干: 题目描述 XX酒店的老板想成为酒店之王,本着这种希望,第一步要将酒店变得人性化.由于很多来住店的旅客有自己喜好的房间色调.阳光等, ...

  8. Centos搭建图形界面VNC

    #!/bin/sh unset SESSION_MANAGER unset DBUS_SESSION_BUS_ADDRESS exec /etc/X11/xinit/xinitrc

  9. PCB SQL Server 代码创建DbLink

    代码如下: ) ) ) ) ) SET @serverName = 'DbLinkName' --db链接名 SET @ip = '120.79.36.65' --需连接服务器的IP SET @dbN ...

  10. E20171015-hm

    quirk   n. 怪癖; 奇事,巧合; 突然的弯曲; propagation  n. 宣传; 传播,传输,蔓延,扩展,波及深度; [生]繁殖法,[地]传导; 培养; immediate  adj. ...