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 ...
随机推荐
- json入门初体验
json是JavaScript对象表示法,也是轻量级的文本数据交互格式,独立于语言,能够自我描述 json文本格式在语法上与创建JavaScript对象代码相同,多以json不需要解析器,js程序能够 ...
- Spring boot - 梳理 - 根本上说，Spring Boot项目只不过是一个普通的Spring项目，只是使用了Spring Boot的起步依赖和自动配置
根本上说,Spring Boot项目只不过是一个普通的Spring项目,只是使用了Spring Boot的起步依赖和自动配置
- JVM 调优 - jmap
Java命令学习系列(三)——Jmap 2015-05-16 分类:Java 阅读(17065) 评论(9) 阿里大牛珍藏架构资料,点击链接免费获取 Jmap jmap是JDK自带的工具软件,主要用于 ...
- Maven 梳理 - 核心概念
Maven坐标 依赖配置 依赖范围 依赖范围scope用来控制依赖和编译,测试,运行的classpath的关系. 主要的是三种依赖关系如下: 1.compile: 默认编译依赖范围.对于编译,测试,运 ...
- 使用maven开发javaweb项目
想重新学习一下java web的知识,之前也学习过一些但是也没有用在开发中所以也忘的七七八八了,因为从事Android开发免不了要与服务器打交道,有时候想自己写一个小DEMO需要服务器的时候感觉真是很 ...
- CentOS 安装lsof命令
1.在控制台上输入:# yum install lsof,安装过程中按y进行确认 2.使用lsof -i :port 可以产看端口的进程信息
- .net core 3.0 Signalr - 02 使用强类型的Hub
## 强类型的优缺点 - 优点 强类型的Hub可以避免魔法函数名,相比弱类型更容易维护和发现问题,直接上代码 - 缺点 特么的得多些好几行代码 ## 代码 ### 接口定义 ``` C# /// // ...
- 怎样实现给DEDE5.7的栏目增加栏目图片
前两天用DEDE做二次开发的时候,遇到一个问题,领导让给每个栏目增加一个栏目图片的功能,网上找了些东西,结合自己实际做的时候的方法,下面详细描述下具体的实现方式(只测试了V5.7版本,对低版本是否适用 ...
- SpringBootSecurity学习（24）前后端分离版之OAuth2.0 应用登记
应用登记 一个应用要求 OAuth 授权,必须先到对方网站登记,让对方知道是谁在请求.举个例子,下面是github的登记页面: https://github.com/settings/applicat ...
- JS里面的铠甲合体！
本标题党又回来了,最近在专心研究一些JS基础性的书籍,以期把原理都了解透彻,所以写文章的频率就降了下来.但是今天我必须要来写一下子,为什么呢,因为今天周五!先说明一下JS里面的拆箱与装箱指的是JS封箱 ...