黑马vue---17、vue中通过属性绑定绑定style行内样式
黑马vue---17、vue中通过属性绑定绑定style行内样式
一、总结
一句话总结：
如果属性名中带有短线必须加引号，比如： h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
h1 :style="styleObj1"
二、内容在总结中
1、使用内联样式
### 使用内联样式 1. 直接在元素上通过 `:style` 的形式，书写样式对象
```
<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>
``` 2. 将样式对象，定义到 `data` 中，并直接引用到 `:style` 中
+ 在data上定义样式：
```
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
```
+ 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
```
<h1 :style="h1StyleObj">这是一个善良的H1</h1>
``` 3. 在 `:style` 中通过数组，引用多个 `data` 上的样式对象
+ 在data上定义样式：
```
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
h1StyleObj2: { fontStyle: 'italic' }
}
```
+ 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
```
<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>
```
2、代码
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head> <body>
<div id="app">
<!-- 对象就是无序键值对的集合 -->
<!-- <h1 :style="styleObj1">这是一个h1</h1> --> <h1 :style="[ styleObj1, styleObj2 ]">这是一个h1</h1>
</div> <script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
styleObj1: { color: 'red', 'font-weight': 200 },
styleObj2: { 'font-style': 'italic' }
},
methods: {}
});
</script>
</body> </html>
黑马vue---17、vue中通过属性绑定绑定style行内样式的更多相关文章
- 第二章 Vue快速入门-- 16 vue中通过属性绑定为元素绑定style行内样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- Vue中通过属性绑定为元素绑定style行内样式
1.直接在元素上通过:style的形式,书写样式对象 2.将样式对象定义在data中,并直接引用到:style中 3.在:style中通过数组,引用多个data上的样式对象
- vue通过属性绑定为元素绑定style行内样式
1.直接在元素上通过:style绑定书写 <h1 :style="{color: 'red','font-size': '40px'}">这是一 ...
- 为何给CheckBox设置了checked属性还是没有勾选，行内样式都显示了checked
为何给CheckBox设置了checked属性还是没有勾选,行内样式都显示了checked 正常情况下我们设置给CheckBox一个checked属性后一般都会选中 然而我今天在做案例的时候却遇到了类 ...
- 13.VUE学习之控制行内样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- CSS中的块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
- HTML5中对于块级元素和行内元素的总结
转自:https://www.cnblogs.com/iverson666/p/9169274.html块级元素:块级大多为结构性标记 <address>...</adderss&g ...
- html中的块级元素和行内元素
块级元素:块级大多为结构性标记 <address>...</adderss> <center>...</center> 地址文字 <h1> ...
- webstorm中emmet展开a标签和行内元素不换行的解决办法
大家好我是木瓜太香,大家在使用 webstorm 编写 html 的时候可能会遇到展开部分标签挨在一起的情况,相信很多小伙伴都想解决这个问题,接下来我们就开始吧! 先来看看我们输入如下 emmet 代 ...
随机推荐
- vuex数据传递的流程
当组件修改数据的时候必须通过store.dispacth来调用actions中的方法. 当actions中的方法被触发的时候通过调用commit的方法来触发mutations里面的方法 mutatio ...
- sql server 语句书写注意事项
1 Between在某些时候比IN 2 在必要是对全局或者局部临时表创建索引,有时能够提高速度,但不是一定会这样,因为索引也耗费大量的资源.他的创建同是实际表一样 3 尽量少用视图,它的效率低.对视 ...
- JAVA线程池例子
用途及用法 网络请求通常有两种形式:第一种,请求不是很频繁,而且每次连接后会保持相当一段时间来读数据或者写数据,最后断开,如文件下载,网络流媒体等.另 一种形式是请求频繁,但是连接上以后读/写很少量的 ...
- Python之IDE工具下载安装及注册详解及创建项目
这篇文章很适合刚接触python语言的或者没有语言基础的同学参考: 目录: 一.IDE工具下载安装 二.IDE注册方法 三.使用IDE 开发工具使用创建项目 一.下载并安装, IntelliJ IDE ...
- SpEL表达式总结
前言SpEL(Spring Expression Language),即Spring表达式语言,是比JSP的EL更强大的一种表达式语言.为什么要总结SpEL,因为它可以在运行时查询和操作数据,尤其是数 ...
- 第七章、Ajango自带auth模块
目录 第七章.Ajango自带auth模块 一.什么是auth auth是django自带的用户认证模块 二.auth模块的常用方法 三.拓展默认的auth_user表 第七章.Ajango自带aut ...
- DB2 alter 新增/删除/修改列
SQL语句 增加列.修改列.删除列 1 添加字段 语法 : alter table 表名称 add 字段名称 类型 demo: alter table tableName add columnName ...
- shell脚本基础编写
shell脚本的格式 名称:Shell 脚本文件的名称可以任意,但为了避免被误以为是普通文件,建议将 .sh 后缀加上,以表示是一个脚本文件. shell 脚本中一般会出现三种不同的元素: 第一行的脚 ...
- SSE
最近尝试了一下服务器端的推送,之前的做法都是客户端轮询,定时向服务器发送请求.但这造成了我的一些困扰: 1:轮询是由客户端发起的,那么在服务端就不能判别我要推送的内容是否已经过期,因为我很难判断某个信 ...
- Vue项目中的文件导出
项目中涉及到文件导出,分xml和excel导出.不同的文件导出格式不同,需要根据文件类型判断导出格式. exportAllData(val){ //全部导出 if(!val){ this.export ...