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 ...
随机推荐
- C#控件及常用属性
1.窗体(Form) 1.常用属性 (1)Name 属性:用来获取或设置窗体的名称,在应用程序中可通过Name 属性来引用窗体. (2) WindowState 属性: 用来获取或设置窗体的窗口状态. ...
- Spring Boot Thymeleaf 实现国际化
开发传统Java WEB工程时,我们可以使用JSP页面模板语言,但是在SpringBoot中已经不推荐使用了.SpringBoot支持如下页面模板语言 Thymeleaf FreeMarker Vel ...
- html实现打印预览效果
前面说到利用lodop插件进行打印设置,那个应用于打印快递面单,或者跟快递面单相似场景的情况. 今天的利用html快速打印出A4纸大小的场景,例如:合同.静态文本等. 效果如下: 方式一 1.设置di ...
- 对vue nextTick深入理解－vue性能优化、DOM更新时机、事件循环机制
一.定义［nextTick.事件循环］ nextTick的由来: 由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图 ...
- 只要听说过电脑的人都能看懂的网上pdf全书获取项目
作者:周奇 最近我要获取<概统>的教材自学防挂科(线代已死),于是我看到 htt链ps:/链/max链.book接118接.com接/html/2018/0407/160495927.sh ...
- Dockerfile 构建镜像
一.使用dockerfile构建镜像 基本结构: a.设置基础镜像 当前镜像继承于的基础镜像 FROM centos:latest b.设置维护者信息 没有固定格式 c.设置需要添加到容器中的文件 ...
- 深圳市网络安全中心发出通告，TeamViewer已被APT41黑客攻破
上期我们讲了东南亚赌局为什么都是福建老板了,这次来介绍下黑客组织APT41 ,这个组织在 HT界 比较出名,很早之前是匿名在地下交易所的,而在近年频繁出现在大众视野中,这不,刚刚又把我们常用的远程工具 ...
- github代码仓库提示：“We found a potential security vulnerability in one of your dependencies”
问题描述: Github上传代码后出现这样的错误: We found a potential security vulnerability in one of your dependencies. A ...
- 配置mysql可局域网内访问
一 进入mysql输入密码 :mysql -u root -p二 执行可局域网访问命令:GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY ...
- BZOJ 4597: [Shoi2016]随机序列
4597: [Shoi2016]随机序列 Time Limit: 20 Sec Memory Limit: 256 MBSubmit: 255 Solved: 174[Submit][Status ...