<!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. 【django】分页

    分页 1.简单分页 from django.conf.urls import url from django.contrib import admin from app01 import views ...

  2. java获取配置文件中的key=value值

    1.献上工具类 package com.test.util; import java.io.FileInputStream; import java.io.FileNotFoundException; ...

  3. springboot值mybatis 别名等配置

    在application配置文件中添加如下: mybatis: #该配置替换在sql-config-map中的typeAliases配置 type-aliases-package: com.ww.ww ...

  4. Java静态代理&动态代理&Cglib代理详解

    一.静态代理 根据被代理的类的时机的不同,如果在编译阶段就能确定下来的被代理的类是哪一个,那么,就可以使用静态代理的方式. 申明一个接口: /** * @author jiaqing.xu@hand- ...

  5. JavaScript实现各种排序算法

    前言:本文主要是用JavaScript实现数据结构中的各种排序算法,例如:插入排序.希尔排序.合并排序等. 冒泡排序 function bubbleSort(arr) { console.time(& ...

  6. Kylin构建Cube过程详解

    1 前言 在使用Kylin的时候,最重要的一步就是创建cube的模型定义,即指定度量和维度以及一些附加信息,然后对cube进行build,当然我们也可以根据原始表中的某一个string字段(这个字段的 ...

  7. 【THE LAST TIME】this：call、apply、bind

    前言 The last time, I have learned [THE LAST TIME]一直是我想写的一个系列,旨在厚积薄发,重温前端. 也是给自己的查缺补漏和技术分享. 欢迎大家多多评论指点 ...

  8. asp.net core 腾讯验证码的接入

    asp.net core 腾讯验证码的接入 Intro 之前使用的验证码服务是用的极验验证,而且是比较旧的,好久之前接入的,而且验证码服务依赖 Session,有点不太灵活,后来发现腾讯也有验证码服务 ...

  9. DCL语句

    DCL语句我们现在默认使用的都是root用户,超级管理员,拥有全部的权限.但是,一个公司里面的数据库服务器上面可能同时运行着很多个项目的数据库.所以,我们应该可以根据不同的项目建立不同的用户,分配不同 ...

  10. django2.0+连接mysql数据库迁移时候报错

    django2.0+连接mysql数据库迁移时候报错 情况一 错误信息 django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.13 ...