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 ...
随机推荐
- 初识PE文件结构
前言 目前网络上有关PE文件结构说明的文章太多了,自己的这篇文章只是单纯的记录自己对PE文件结构的学习.理解和总结. 基础概念 PE(Portable Executable:可移植的执行体)是Win3 ...
- 使用.net core3.0 正式版创建Winform程序
前阵子一直期待.net core3.0正式版本的出来,以为这个版本出来,Winform程序又迎来一次新生了,不过9.23日出来的马上下载更新VS,创建新的.net core Winform项目,发现并 ...
- Git项目分支分配
主要分支包含master分支与develop分支,临时分支可以分为: release: 从develop分出 ,是最终要发布的版本. feature: 实现某功能时推荐新建分支,从develop分出. ...
- .Net Core 商城微服务项目系列（十四）：分布式部署携程Apollo构建配置中心
一.开场白 在系统设计里我们有很多配置希望独立于系统之外,而又能够被系统实时读取.但是在传统的系统设计里,配置信息通常是耦合在系统内的,比如.net里通常会放在App.config或者web.conf ...
- yii2 验证规则使用方法
required : 必须值验证属性 [['字段名'],required,'requiredValue'=>'必填值','message'=>'提示信息']; #说明:CRequiredV ...
- 同时支持EF+Dapper的混合仓储，助你快速搭建数据访问层
背景 17年开始,公司开始向DotNet Core转型,面对ORM工具的选型,当时围绕Dapper和EF发生了激烈的讨论.项目团队更加关注快速交付,他们主张使用EF这种能快速开发的ORM工具:而在线业 ...
- kotlin系列文章 --- 3.条件控制
if表达式 一个if语句包含一个布尔表达式和一条或多条语句 // 基础用法 var max = a if (a<b) max = b // 加上else var max: Int if(a> ...
- display:box和display:flex属性介绍
1.display:box 父容器里面的box属性有box-orient|box-dirextion|box-align|box-pack|box-lines box-orient:用来确定父容器里面 ...
- c语言程序设计2
c语言秋季作业2 问题 答案 这个作业属于哪个课程 C语言程序设计Ⅰ 这个作业要求在哪里 ［c语言博客作业02］(https://edu.cnblogs.com/campus/zswxy/SE2019 ...
- mac 下修改 jenkins 端口以及Jenkins的启动、关闭与更新
安装包安装的Jenkins修改默认端口的方法: 先关闭jenkins ; 命令行下修改端口:sudo defaults write /Library/Preferences/org.jenkins-c ...