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 ...
随机推荐
- Eureka Server不剔除已关停的节点的问题
由于Eureka拥有自我保护机制,当其注册表里服务因为网络或其他原因出现故障而关停时,Eureka不会剔除服务注册,而是等待其修复.这是AP的一种实现. 自我保护机制:Eureka Server在运行 ...
- CAS详细登录流程(转）
转:https://www.cnblogs.com/lihuidu/p/6495247.html 4.CAS的详细登录流程 上图是3个登录场景,分别为:第一次访问www.qiandu.com.第二次访 ...
- Spring 梳理-跨重定向请求传递数据-Flash
Spring MVC Flash Attribute 的讲解与使用示例 1. Spring MVC 3.1版本加了一个很有用的特性,Flash属性,它能解决一个长久以来缺少解决的问题,一个POST/R ...
- windows 安装gitbook并使用gitbook editor可视化工具
GitBook是一个基于 Node.js 的命令行工具,可使用 Github/Git 和 Markdown 来制作精美的电子书. 一.官网下载nodejs直接安装 传送门,安装完成后如下: 可以看到n ...
- java @postconstruct初始化注解使用
1.从Java EE 5规范开始,Servlet中增加了两个影响Servlet生命周期的注解(Annotion):@PostConstruct和@PreDestroy.这两个注解被用来修饰一个非静态的 ...
- 让你如绅士般基于描述编写 Python 命令行工具的开源项目：docopt
作者:HelloGitHub-Prodesire HelloGitHub 的<讲解开源项目>系列,项目地址:https://github.com/HelloGitHub-Team/Arti ...
- 从0开始学FreeRTOS-1
我们知道,(单核)单片机某一时刻只能干一件事,会造成单片机资源的浪费,而且还有可能响应不够及时,所以,在比较庞大的程序或者是要求实时性比较高的情况下,我们可以移植操作系统.因为这种情况下操作系统比裸机 ...
- 寻找子串位置<codevs>
KMP板子题; 如果不会可以参考其他算法书 代码: #include<iostream> #include<stdio.h> #include<stdlib.h> ...
- dp复习 背包[礼物]
[问题描述]人生赢家老王在网上认识了一个妹纸,然后妹纸的生日到了,为了表示自己的心意,他决定送她礼物.可是她喜爱的东西特别多,然而他的钱数有限,因此他想知道当他花一定钱数后剩余钱数无法再购买任何一件剩 ...
- DG常用运维命令及常见问题解决
DG常见运维命令及常见问题解决方法 l> DG库启动.关闭标准操作Dataguard关闭1).先取消日志应用alter database recover managed standby data ...