<!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的更多相关文章

  1. JavaScript特性（attribute）、属性（property）和样式（style）

    最近在研读一本巨著<JavaScript忍者秘籍>,里面有一篇文章提到了这3个概念. 书中的源码可以在此下载.我将源码放到了线上,如果不想下载,可以直接访问在线网址,修改页面名就能访问到相 ...

  2. obj.style.z-index的正确写法

    obj.style.z-index的正确写法 今天发现obj.style.z-index在js里面报错,后来才知道在js里应该把含"-"的字符写成驼峰式,例如obj.style.z ...

  3. H5 canvas的 width、height 与style中宽高的区别

    Canvas 的width height属性 1.当使用width height属性时,显示正常不会被拉伸:如下 <canvas id="mycanvas" width=&q ...

  4. vue中，class、内联style绑定、computed属性

    1.绑定Class ①对象语法 <li :class="{ 'active': activeIdx==0 }" @click="fnClickTab(0)" ...

  5. Bootstrap WPF Style,Bootstrap风格的WPF样式

    简介 GitHub地址:https://github.com/ptddqr/bootstrap-wpf-style 此样式基于bootstrap-3.3.0,样式文件里的源码行数都是指的这个版本.CS ...

  6. WPF's Style BasedOn

    <Style x:Key="BasedStyle" BasedOn="{x:Null}" TargetType="{x:Type Control ...

  7. ReactNative中iOS和Android的style分开设置教程

    reactnative可以编辑iOS程序也可以编辑Android程序, 而且80%的代码都可以重用. 及有些文件是两个系统通用的, 相信大家也都清楚了. 但是也许大家会遇到一些屏幕布局的问题, 最常遇 ...

  8. Style样式

    最重要的两个元素 :setter  Trigger  Style中的Setter setter是用来设置属性值的 <Style TargetType="{x:Type TextBox} ...

  9. Android 样式 (style) 和主题(theme)

    转载:https://gold.xitu.io/post/58441c48c59e0d0056a30bc2 样式和主题 样式是指为 View 或窗口指定外观和格式的属性集合.样式可以指定高度.填充.字 ...

  10. style，currentStyle，getComputedStyle的区别和用法

    先说说层叠样式表的三种形式(三种的叫法不一,按照各自的习惯): 一.内联样式:在HTML标签用style属性设置.如: 1 <p >这是内联样式</p> 二.嵌入样式:通过&l ...

随机推荐

  1. 十分钟快速学会Matplotlib基本图形操作

    在学习Python的各种工具包的时候,看网上的各种教程总是感觉各种方法很多很杂,参数的种类和个数也十分的多,理解起来需要花费不少的时间. 所以我在这里通过几个例子,对方法和每个参数都进行详细的解释,这 ...

  2. layDate——设置最大日期不能超过当前日期

    例如,当前年份是2018年,实现效果如下,2018年之后年份不可操作: 具体代码实现: layui.use([ 'laydate'], function () { var laydate = layu ...

  3. node学习笔记(一)本地文件目录查看器

    Node.js 新闻 nw.js 前端开发桌面应用 内容 node.js实战 照例提供百度云链接,本来以为是实战系列的那本,但不是,不过这本也不错 链接:https://pan.baidu.com/s ...

  4. SpringBootSecurity学习（14）前后端分离版之 OAuth2.0介绍

    登录总结 前面基本介绍了security的常规用法,同时介绍了JWT和它的一个简单实现,基本上开发中遇到的登录问题都能解决了,即使在分布式开发,或者微服务开发中实现登录也基本没有问题了.securit ...

  5. phaser学习总结之Tween详解

    前言 在上一章phaser学习总结之phaser入门教程中,我们已经初步入门了phaser,并通过一个案例了解了phaser,现在我们需要对phaser中的对象进行讲解,本章需要讲解的是tween,即 ...

  6. java架构之路-（面试篇）Mysql面试大全

    说一下mysql比较宏观的面试,具体咋写sql的这里就不过多举例了.后面我还会给出一个关于mysql面试优化的试题,这里主要说的索引和B+Tree结构,很少提到我们的集群配置优化方案. 1.索引是什么 ...

  7. spring5 源码深度解析----- Spring事务 是怎么通过AOP实现的？（100%理解Spring事务）

    此篇文章需要有SpringAOP基础,知道AOP底层原理可以更好的理解Spring的事务处理. 自定义标签 对于Spring中事务功能的代码分析,我们首先从配置文件开始人手,在配置文件中有这样一个配置 ...

  8. Java如何安装JDK，配置环境变量。超级详细图及操作

    突然想起自己大学刚接触java的时候,要下载JDK和配置环境变量,那时候我上网找了很多教学,结果发现很多的博主都是表达不太清晰,或者是我理解能力差点,导致我那时候搞了一个多小时才搞定,而且事后每次我重 ...

  9. 一次Commons-HttpClient的BindException排查

    线上有个老应用,在流量增长的时候,HttpClient抛出了BindException.部分的StackTrace信息如下: java.net.BindException: Address alrea ...

  10. 【TencentOS tiny】 超详细的TencentOS tiny移植到STM32F103全教程

    移植前的准备工作 1. 获取STM32的裸机工程模板 STM32的裸机工程模板直接使用野火STM32开发板配套的固件库例程即可.可以从我github上获取https://github.com/jiej ...