style.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
width: 300px;
height: 300px;
margin: 0 auto;
background: skyblue;
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div class="div1" :style="styleStr" >
<h1>helloworld</h1>
</div> <hr /> <div class="div1" :style="styleObj" >
<h1>helloworld</h1>
</div> <hr /> <div class="div1" :style="{background:color}" >
<h1>helloworld</h1>
<button @click='changeColor'>更改颜色</button>
</div> <hr />
<div class="div1" :style="{boxShadow:'0px 0px 50px '+color }" >
<h1>helloworld</h1>
<button @click='changeColor'>更改颜色</button>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
styleStr:'color: #fff;',
styleObj:{
background:'pink',
fontSize:'50px',
boxShadow:'0px 0px 30px #ccc'
},
color:'purple'
},
methods:{
changeColor:function(){
this.color = 'seagreen'
}
}
})
</script>
</body>
</html>
style.html的更多相关文章
- JavaScript特性（attribute）、属性（property）和样式（style）
最近在研读一本巨著<JavaScript忍者秘籍>,里面有一篇文章提到了这3个概念. 书中的源码可以在此下载.我将源码放到了线上,如果不想下载,可以直接访问在线网址,修改页面名就能访问到相 ...
- obj.style.z-index的正确写法
obj.style.z-index的正确写法 今天发现obj.style.z-index在js里面报错,后来才知道在js里应该把含"-"的字符写成驼峰式,例如obj.style.z ...
- H5 canvas的 width、height 与style中宽高的区别
Canvas 的width height属性 1.当使用width height属性时,显示正常不会被拉伸:如下 <canvas id="mycanvas" width=&q ...
- vue中，class、内联style绑定、computed属性
1.绑定Class ①对象语法 <li :class="{ 'active': activeIdx==0 }" @click="fnClickTab(0)" ...
- Bootstrap WPF Style,Bootstrap风格的WPF样式
简介 GitHub地址:https://github.com/ptddqr/bootstrap-wpf-style 此样式基于bootstrap-3.3.0,样式文件里的源码行数都是指的这个版本.CS ...
- WPF's Style BasedOn
<Style x:Key="BasedStyle" BasedOn="{x:Null}" TargetType="{x:Type Control ...
- ReactNative中iOS和Android的style分开设置教程
reactnative可以编辑iOS程序也可以编辑Android程序, 而且80%的代码都可以重用. 及有些文件是两个系统通用的, 相信大家也都清楚了. 但是也许大家会遇到一些屏幕布局的问题, 最常遇 ...
- Style样式
最重要的两个元素 :setter Trigger Style中的Setter setter是用来设置属性值的 <Style TargetType="{x:Type TextBox} ...
- Android 样式 (style) 和主题(theme)
转载:https://gold.xitu.io/post/58441c48c59e0d0056a30bc2 样式和主题 样式是指为 View 或窗口指定外观和格式的属性集合.样式可以指定高度.填充.字 ...
- style，currentStyle，getComputedStyle的区别和用法
先说说层叠样式表的三种形式(三种的叫法不一,按照各自的习惯): 一.内联样式:在HTML标签用style属性设置.如: 1 <p >这是内联样式</p> 二.嵌入样式:通过&l ...
随机推荐
- centos 升级
yum -y update升级所有包同时也升级软件和系统内核 yum -y upgrade只升级所有包,不升级软件和系统内核
- layDate——初步使用
layui系列中layDate的使用教程网址 https://www.layui.com/laydate/ 我这里简单举例: 1.引入js <script type="text/jav ...
- redis列表底层实现之一——链表
注意标题中的“之一”,那么什么情况下,列表会使用链表作为其数据结构呢? 答案就是——列表键包含了大量的元素,或者列表中包含的元素都是比较长的字符串. Ok,由于链表大家都比较熟悉,接下来就直接给出链表 ...
- yum install php-gd 安装php gd库报错Error: php56w-common conflicts with php-common-5.3.3-48.el6_8.x86_64 大
yum install php-gd安装php gd库报错Error: php56w-common conflicts with php-common-5.3.3-48.el6_8.x86_64大概的 ...
- [WP8.1]RSA 使用BouncyCastle 公钥解密
写应用的时候遇到个服务器返回私钥加密过的数据 ,然后要在客户端用公钥解密的需求 ,一直没找到方法,应用搁置了一个学期,多方搜索,结论就是.net没有实现公钥解密的方法,要自己实现,于是硬着头皮开始看 ...
- Linux内存描述之内存区域zone–Linux内存管理(三)
服务器体系与共享存储器架构 日期 内核版本 架构 作者 GitHub CSDN 2016-06-14 Linux-4.7 X86 & arm gatieme LinuxDeviceDriver ...
- Django-admin站点管理的详细使用
使用Django的管理模块,需要按照如下步骤操作: 管理界面本地化 创建管理员 注册模型类 自定义管理页面 1 管理界面本地化 在settings.py中设置语言和时区 LANGUAGE_CODE = ...
- http服务端架构演进
摘要 在详解http报文相关文章中我们介绍了http协议是如何工作的,那么构建一个真实的网站还需要引入组件呢?一些常见的名词到底是什么含义呢? 什么叫正向代理,什么叫反向代理 服务代理与负载均衡的差别 ...
- Web安全之url跳转漏洞及bypass总结
0x01 成因 对于URL跳转的实现一般会有几种实现方式: META标签内跳转 javascript跳转 header头跳转 通过以GET或者POST的方式接收将要跳转的URL,然后通过上面的几种方式 ...
- 爬虫2：html页面+beautifulsoap模块+post方式+demo
爬取html页面,有时需要设置参数post方式请求,生成json,保存文件中. 1)引入模块 import requests from bs4 import BeautifulSoup url_ = ...