<!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. [经验栈]SQL语句逻辑运算符"AND"、"&&"兼容性

    最近打算把博客转移到typecho平台,选了一个风格个人比较喜欢的主题,即Akina for Typecho 主题模板,在这里先感谢题主的开源分享,但是在使用过程中一开始就出现"500 Da ...

  2. 【SQL server】SQL Server 触发器

    触发器是一种特殊类型的存储过程,它不同于之前的我们介绍的存储过程.触发器主要是通过事件进行触发被自动调用执行的.而存储过程可以通过存储过程的名称被调用. Ø 什么是触发器 触发器对表进行插入.更新.删 ...

  3. Mybatis基础知识点

    1. Mybatis框架优缺点 优点: 1. 易于上手和掌握. 2. sql写在xml里,便于统一管理和优化. 3. 解除sql与程序代码的耦合. 4. 提供映射标签,支持对象与数据库的orm字段关系 ...

  4. 函数的return和参数

    1.函数 将一些代码进行封装 def 函数名 括号 冒号:#创建 函数体(代码块) 函数名 + 小括号 #调用 1.1函数的返回值 return return 不写返回的是None,return写了不 ...

  5. 去掉文件 BOM 头

    什么是 BOM? BOM 全称是 Byte Order Mark,意思是字节顺序标记.常用来当作标示文件是以 UTF-8.UTF-16 或者 UTF-32 编码的标记. 去除 BOM 头方法 vim ...

  6. .NET Core 3.0之深入源码理解ObjectPool（一）

    写在前面 对象池是一种比较常用的提高系统性能的软件设计模式,它维护了一系列相关对象列表的容器对象,这些对象可以随时重复使用,对象池节省了频繁创建对象的开销. 它使用取用/归还的操作模式,并重复执行这些 ...

  7. 美化你的IDEA—背景图片

    IDEA设置背景图片 很多人都不知道IDEA可以像桌面一样设置背景图片,下面我们来美化我们的开发工具. 有的IDEA版本是搜不到的,我这个就是,现在搜的是已经装好的. 没有的我们可以去http://p ...

  8. bugku 程序员本地网站

    提示从本地访问,怎样让服务器认为你是从本地进行访问的: 使用burp抓包并在包中进行修改加入X-Forwarded-For: 127.0.0.1 X-Forwarded-For: 简称XFF头,它代表 ...

  9. Redis的几个核心机制底层原理

    #### 1.S_DOWN和O_DOWN ######   S_DOWN和O_DOWN两种宕机状态  (1).S_DOWN是主观宕机,就一个哨兵如果自己觉得一个master宕机了,那么就是主观宕机 s ...

  10. 6个Linux运维典型问题，看大牛的分析解决思路

    问题1:文件系统破坏导致系统无法启动 Checking root filesystem /dev/sda6 contains a file system with errors, check forc ...