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 ...
随机推荐
- Sparql语言模型(一)
在进行RDF数据查询或描写叙述的时候.Sparql不管从出身.标准抑或操作习惯上都是一个不错的选择.然而对于一个刚開始学习的人来说多多少少有些"禁忌"的意味,操作起来也有点畏首畏尾 ...
- View载入具体解释
文章一開始我要对前面一篇文章做点补充 相信大家都知道View有两个方法. public boolean post(Runnable action) public boolean postDelayed ...
- Weka算法Classifier-meta-AdaBoostM1源代码分析(一)
多分类器组合算法简单的来讲经常使用的有voting,bagging和boosting,当中就效果来说Boosting略占优势,而AdaBoostM1算法又相当于Boosting算法的"经典款 ...
- 小胖说事22-----iOS开发技巧之取消键盘响应和截屏功能
1.UILable内容模糊 在非Retina的iPad mini 的屏幕上,一个UILable的frame的origin值假设是有小数位(如0.5),就会造成显示模糊,所以不妨用整数值的origin. ...
- Python基础教程之第5章 条件, 循环和其它语句
Python 2.7.5 (default, May 15 2013, 22:43:36) [MSC v.1500 32 bit (Intel)] on win32 #Chapter 5 条件, 循环 ...
- Music information retrieval
Music information retrieval - Wikipedia https://en.wikipedia.org/wiki/Music_information_retrieval Mu ...
- Android 布局属性大全
常用属性汇总: android:hint 设置EditText为空时输入的提示信息 android:gravity 对该view内容的限定:靠上 下 左 右 andro ...
- 利用mass storage class 做免驱动usb设备.
当需要使用usb bulk传输,想让设备像串口通讯那样和PC主机通信, 通常需要自己做一个PC端的驱动,比较麻烦. 为避免在pc上编写usb设备驱动的麻烦,可以将设备做成mass storage 类的 ...
- 主表a主表b 从表c中有ab两个表中各一个字段a1,b1 从表d中有ab两个表中各一个字段a2,b2
a1和a2在a表中具有唯一性 b1和b2在b表中具有唯一性 现在需要连接c表和d表 需要分两步来做 1.先让c表join表a和表b select c.*,a.a2,b.b2 from c inner ...
- CF85 E Guard Towers——二分图
题目:http://codeforces.com/contest/85/problem/E 给定一些点的坐标,求把它们分成两组,组内最大距离的最小值: 二分答案,判断就是看距离大于 mid 的点能否组 ...