黑马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行内样式的更多相关文章

  1. 第二章 Vue快速入门-- 16 vue中通过属性绑定为元素绑定style行内样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  2. Vue中通过属性绑定为元素绑定style行内样式

    1.直接在元素上通过:style的形式,书写样式对象 2.将样式对象定义在data中,并直接引用到:style中 3.在:style中通过数组,引用多个data上的样式对象

  3. vue通过属性绑定为元素绑定style行内样式

    1.直接在元素上通过:style绑定书写             <h1 :style="{color: 'red','font-size': '40px'}">这是一 ...

  4. 为何给CheckBox设置了checked属性还是没有勾选，行内样式都显示了checked

    为何给CheckBox设置了checked属性还是没有勾选,行内样式都显示了checked 正常情况下我们设置给CheckBox一个checked属性后一般都会选中 然而我今天在做案例的时候却遇到了类 ...

  5. 13.VUE学习之控制行内样式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  6. CSS中的块级元素和行内元素

    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...

  7. HTML5中对于块级元素和行内元素的总结

    转自:https://www.cnblogs.com/iverson666/p/9169274.html块级元素:块级大多为结构性标记 <address>...</adderss&g ...

  8. html中的块级元素和行内元素

    块级元素:块级大多为结构性标记 <address>...</adderss> <center>...</center>  地址文字 <h1> ...

  9. webstorm中emmet展开a标签和行内元素不换行的解决办法

    大家好我是木瓜太香,大家在使用 webstorm 编写 html 的时候可能会遇到展开部分标签挨在一起的情况,相信很多小伙伴都想解决这个问题,接下来我们就开始吧! 先来看看我们输入如下 emmet 代 ...

随机推荐

  1. 求两个等长的已排序数组的中位数(《算法导论》P113习题9.3-8）

    [问题]设X[1...n]和Y[1...n]为两个数组,每个都包含n个已排序好的数.给出一个求数组X和Y中所有2n个元素的中位数的.O(lgn)时间的算法. [解析]O(lgn)的时间复杂度就是二分查 ...

  2. JavaScript之排序算法

    一.冒泡排序 原理:1.比较相邻的元素.如果第一个比第二个大,就交换两个数:2.对每一对相邻元素重复做步骤一,从开始第一对到结尾的最后一对,该步骤结束会产生一个最大的数:3.针对所有的数重复以上的步骤 ...

  3. persistence.xml模板配置

    1.右键创建的persistence.xml 2.选择2.0版本的模板 3.复制右侧代码,写入xml文件中 <?xml version="1.0" encoding=&quo ...

  4. 实时跟踪之TRACA

    背景: 目前,在实时跟踪领域存在着越来越多的先进方法,同时也极大地促进了该领域的发展.主要有两种不同的基于深度学习的跟踪方法:1.由在线跟踪器组成,这些跟踪器依赖网络连续的微调来学习目标的变化外观,精 ...

  5. Lambda使用深入解析

    这一次继续对Lambda表达式进行深入,因为它实在太重要了,这次会涉及到java.util.function中的一些新的FunctionalInterface的使用,用它来进一步巩固对Lambda表达 ...

  6. idea 设置Terminal为git终端

  7. docker修改数据库密码

    运行mysql(--name 容器名称  -e MYSQL_ROOT_PASSWORD设置初始密码  -p 3307:3306  端口映射,主机端口3307) docker run --name my ...

  8. modbus-crc16——c语言

    为确保消息数据的完整性,除了验证消息CRC之外,建议实现检查串行端口(UART)成帧错误的代码.如果接收消息中的CRC与接收设备计算的CRC不匹配,则应忽略该消息.下面的C语言代码片段显示了如何使用逐 ...

  9. nodejs解析url参数的三种方法

    要解析的url:http://127.0.0.1:8090/?name=cpc&age=21 利用js字符串操作函数进行解析 const myserver = require("ht ...

  10. bzoj1497: [NOI2006]最大获利（最小割）

    传送门 第一眼看去:好难 第二眼:不就是个裸的最大权闭合子图么…… 我们从源点向所有用户连边,容量为收益,用户向自己的中转站连边,容量为INF,中转站向汇点连边,容量为费用 那么总收益-最小割就是答案 ...