vue踩坑之路--点击按钮改变div样式
有时候，我们在做项目的时候，想通过某个按钮来改变某个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样式的更多相关文章
- VUE踩坑之路
一.常见报错 1.vue-cli-service 不是内部或外部命令,也不是可运行程序 解决方案: 用以下命令安装Vue CLI就好 npm install -g @vue/cli # OR yarn ...
- 二、JavaScript之点击按钮改变HTML样式 (CSS)
一.代码如下 二.点击前 三.点击后 <!DOCTYPE html> <html> <meta http-equiv="Content-Type" c ...
- 点击按钮改变div背景色，再次点击恢复 -- 原生JS
如果对您有帮助,记得点个赞哦!
- html2canvas的踩坑之路
html2canvas的踩坑之路 前言 早有耳闻这个html2canvas比较坑,但无奈于产品需求的压迫,必须实现html转图片的功能,自此走上了填坑之路,好在最后的效果还算令人满意,这才没有误了产品 ...
- Android 上传开源项目到 jcenter 实战踩坑之路
本文微信公众号「AndroidTraveler」首发. 背景 其实 Android 上传开源项目到 jcenter 并不是一件新鲜事,网上也有很多文章. 包括我本人在将开源项目上传到 jcenter ...
- Vue 爬坑之路（九）—— 用正确的姿势封装组件
迄今为止做的最大的 Vue 项目终于提交测试,天天加班的日子终于告一段落... 在开发过程中,结合 Vue 组件化的特性,开发通用组件是很基础且重要的工作 通用组件必须具备高性能.低耦合的特性 为了满 ...
- Vue 爬坑之路（六）—— 使用 Vuex + axios 发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...
- vue踩坑记
vue踩坑记 易错点 语法好难啊qwq 不要把'data'写成'date' 在v-html/v-bind中使用vue变量时不需要加变量名 在非vue事件中使用vue中变量时需要加变量名 正确 < ...
- Vue 爬坑之路（一）—— 使用 vue-cli 搭建项目
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli vue ...
随机推荐
- 【解决】hive与hbase表结合级联查询的问题
[Author]: kwu [解决]hive与hbase表结合级联查询的问题.hive两个表以上,关联查询时出现长时无法返回的情况. 同一时候也不出现,mr的进度百分比. 查询日志如图所看到的: 解决 ...
- Django搭建简单的站点
1.首先.新建一个项目(project), 名称为 mysite django-admin startproject mysite(假设 django-admin 不行,请用 django-admin ...
- leetcode第一刷_Spiral Matrix
我认为这个题好无聊啊,好端端一个数组.干嘛要跟比巴卜一样转一圈输出呢. . 思想非常easy,每次从左到右.再从上到下,在从右到左,再从下到上.问题是每次到什么时候该改变方向.我的做法是用一个变量保存 ...
- 用JavaScript截图
用JavaScript截图 使用JavaScript截图,这里我要推荐两款开源组件:一个是Canvas2Image,它可以将Canvas绘图编程PNG/JPEG/BMP的图像:但是光有它还不够,我 ...
- swift 2.0 语法 可选类型
import UIKit /*: 可选类型(可以有值, 也可以没有值) * 在OC中我们可以给一个对象类型变量赋值为nil或者一个对象, 而在Swift中如果想给一个变量赋值为nil那么必须明确指定为 ...
- Parallel and Perpendicular
题目链接 题意: 输入n,求正n边形中的对角线1和对角线2的个数(对角线1:至少与其它一个对角线平行:对角线2:至少与其它一个对角线垂直).对角线不能是多边形的边 (4 ≤ n ≤ 10e5) 分析: ...
- Linux中grep命令的12个实践例子
grep是每个Linux发行版都预装的一个强有力的文件模式搜索工具.无论何种原因,如果你的系统没有预装它的话,你可以很容易的通过系统的包管理器来安装它(Debian/Ubuntu系中的apt-get和 ...
- androd基础入门---1环境
1.项目结构特性 2.模拟器设置 3.编译器的下载 直接点击运行即可
- [Apple开发者帐户帮助]九、参考（4）支持的功能（macOS）
macOS应用程序可用的功能取决于您的程序成员身份和签名证书. 能力 ADP 开发者ID Apple开发者 应用程序组 App沙盒 游戏中心 硬化运行时 iCloud:CloudKit i ...
- [Swift通天遁地]二、表格表单-(4)使用系统自带的下拉刷新控件，制作表格的下拉刷新效果
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...