黑马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. Win Server 2012 配置运行 .net core 环境

    今天拿到一台 全新的win 2012 服务器配置服务器环境 记录一下 首先装好IIS 打开服务器管理器  - 添加功能和角色     好 安装完IIS 看一下服务器有没有安装 core的运行环境(全新 ...

  2. 每天一个Linux命令之：chage

    命令简介: 该命令用于密码时效管理.它可以修改账号和密码的有效期.对于chage命令的描述如下所示: The chage command changes the number of days betw ...

  3. 2.第一个MyBatis程序

    1.导入jar包 2.定义实体类 3.创建对应的表 4.定义Dao接口 public interface StudentDAO { public void saveStudent(Student s) ...

  4. Delphi 类的方法

  5. Oracle笔记（十二） 集合、序列

    一.集合 在数学的操作之中存在交.差.并.补的概念,而在数据的查询中也存在此概念,有如下几个连接符号: UNION:连接两个查询,相同的部分不显示: UNION ALL:连接两个查询,相同的部分显示: ...

  6. 洛谷 P2765 魔术球问题 （dinic求最大流，最小边覆盖）

    P2765 魔术球问题 题目描述 «问题描述: 假设有n根柱子,现要按下述规则在这n根柱子中依次放入编号为1,2,3,...的球. (1)每次只能在某根柱子的最上面放球. (2)在同一根柱子中,任何2 ...

  7. 关于IO的同步,异步,阻塞,非阻塞

    上次写了一篇文章:Unix IO 模型学习.恰巧在这次周会的时候,@fp1203 (goldendoc成员之一) 正好在讲解poll和epoll的底层实现.中途正好讨论了网络IO的同步.异步.阻塞.非 ...

  8. 如何使用NugetPackageExplorer 创建Nuget发布包，简易版

    在上一篇博客中,详细介绍了个人Nuget服务器的搭建.这篇博客中,将详细介绍一下如何使用NugetPackageExplorer工具制作可以发布到Nuget服务器上包. 直奔主题 在开始之前,需要下载 ...

  9. Windows下安装配置Apache+PHP+Mysql环境

    1.下载相关安装包 Apache下载: http://archive.apache.org/dist/httpd/binaries/win32/ ,选择httpd-2.2.25-win32-x86-n ...

  10. 微信小程序实现连接蓝牙设备跑步APP

    背景 微信小程序兴起,有变成超级APP的趋势,通过微信提供的小程序api,可以通过微信调用到手机原生的支持. 目标 通过微信小程序实现来实现跑步类App的功能. 需求分析 跑步类App需要的两个核心的 ...