004-读书笔记-Vue官网 Class与Style的绑定

hufeng 发布于2019-08-21 17:16 / 3321人阅读

摘要：绑定绑定，使用，简写的形式是。绑定比较灵活，可以使用表达式字符串对象或数组。绑定字符串绑定字符串的时候只能绑定一个，不能绑定多个。

1.绑定Class

绑定Class，使用 v-bind:class，简写的形式是 :class。绑定Class比较灵活，可以使用表达式、字符串、对象或数组。

1-1 搭建结构

首先，新建一些 class 样式：

  .colorRed {
    color: red;
  }

  .font28px {
    font-size: 28px;
  }

其次，搭建一些HTML结构：

最后，定义一个属性，用来保存类名：

1-2 绑定表达式

绑定表达式的时候，可以直接绑定 Vue 实例中的属性：

这是一个div标签

当然也可以绑定一个三目运算符：

这是一个div标签

上面代码中，使用了一个字符串，可以正常运行，说明可以使用字符串来绑定Class。

1-3 绑定字符串

绑定字符串的时候只能绑定一个 Class，不能绑定多个。

这是一个div标签

如果非要绑定多个字符串，那么就会报错：

这是一个div标签

[HMR] bundle has 1 errors

1-4 绑定数组

既然使用字符串不能绑定多个 Class，那么就可以使用数组来绑定多个 Class。

这是一个div标签

在数组中也可以存在表达式：

这是一个div标签

数组的元素也可以是对象：

这是一个div标签

需要说明的是，{ font28px:clsColor } 中 font28px 是 "font28px" 的简写形式，也是一个字符串；clsColor 是 Vue 实例的属性，会被转成一个布尔类型的值，如果该值为 true，则显示 "font28px" 类，否则不显示。

1-5 绑定对象

绑定对象的写法如下：

这是一个div标签

让我们来理解一下这句代码：

{ font28px: clsColor }     这句代码可以写成下面的形式
{ "font28px": clsColor }   这个时候将clsColor转成布尔值
{ "font28px": true }       由于是true，因此显示类"font28px"
这个时候显示的就是类"font28px"的样式

绑定对象的时候，由于对象可以存在多个属性，因此，可以实现多个Class的绑定。

1-6 总结

绑定单个Class使用：

表达式

字符串

绑定多个Class使用

数组

对象

2.绑定Style

绑定Style和绑定Class类似，因此，使用和绑定Class相同的目录结构，方便查看。

2-1 搭建结构

首先，搭建HTML结构：

其次，定义一个属性，用来设置字体的颜色：

2-2 绑定表达式

这是一个div标签

2-3 绑定字符串

这是一个div标签

2-4 绑定数组

绑定数组是特别需要注意的，因为数组中的元素必须是样式对象，如果不是对象，无法正常解析样式：

这是一个div标签

2-5 绑定对象

在绑定内联样式的时候，对象是经常使用的一种形式：

这是一个div标签

2-6 在内联样式中绑定背景图

这个应该是比较常见的一种需求了，特别写出了，做一下笔记：

3.参考内容

Class 与 Style 绑定

专线服务混合云读书笔记编程思想读书笔记大数据时代读书笔记绑定Style样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89332.html

005-读书笔记-Vue官网自定义指令

摘要：自定义指令的使用在组件中定义一个自定义指令，作用将当前节点中字体颜色设置为红色。参考内容自定义指令 1.自定义指令的使用在组件中定义一个自定义指令，作用：将当前DOM节点中字体颜色设置为红色。在自定义指令中简化了钩子函数，下面的钩子函数相当于 bind 和 unbind 的缩写： export default { name: app, directives: ...

teren 2019-08-22 11:13 评论0 收藏0
002-读书笔记-Vue官网认识数据与指令

摘要：首先把改成的形式这是一段测试文字绑定最后的显示效果如下，如果要看具体的形式，可以在谷歌人员开发工具中自行查看指令的组成部分经过上面的介绍，应该对指令有一个大概的认识，下面就来对指令的每一项进行说明。这篇笔记主要用来说明 Vue 中数据的定义和指令的一些特性，后续会做更深入的说明。 1.Vue中的data函数 1-1 使用data函数由于使用的是单文件组件，因此 Vue 组件中的数据...

hqman 2019-08-21 17:15 评论0 收藏0
004-读书笔记-JavaScript高级程序设计基本概念(下)

摘要：操作符，会将数值改变正数变成负数负数变成正数。同时，也说明了，使用两个逻辑非操作符和的操作结果相同。操作符得到的是余数。不相等操作符有两种。这篇笔记的内容对应的是《JavaScript高级程序设计(第三版)》中的第三章。 1.操作符 1-1 一元操作符递增和递减操作符递增和递减操作符有两个 ++ 和 --。一元操作符使用的时候，可以前置也可以后置。由于两个操作方式类似，先只说明 ...

nevermind 2019-08-22 11:13 评论0 收藏0
Vue学习笔记（一）

摘要：一介绍也称为，读音类似，错误读音，由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。还有一些其他键盘事件，具体参考官方文档。模板就是，用来进行数据绑定，显示在页面中，也称为语法。一、Vue.js介绍 Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。 Vue有以下特点：是一个构建用户界面的框架是一...

baoxl 2019-08-30 13:47 评论0 收藏0
Vue学习笔记（一）

摘要：一介绍也称为，读音类似，错误读音，由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。还有一些其他键盘事件，具体参考官方文档。模板就是，用来进行数据绑定，显示在页面中，也称为语法。一、Vue.js介绍 Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。 Vue有以下特点：是一个构建用户界面的框架是一...

liukai90 2019-08-21 17:05 评论0 收藏0