2018-10-22

Vue：学习笔记（五）-Class 与 Style 绑定

Vue：学习笔记（五）-Class 与 Style 绑定。

提醒

原帖完整收藏于IT老兵驿站，并会不断更新。

前言

本篇继续对Vue的【Class 与 Style 绑定】篇进行总结学习。

正文

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

绑定 HTML Class

对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class：
<div v-bind:class="{ active: isActive }"></div>

所谓对象语法，就是样式这里使用一个对象（大括号括起来的是对象，JavaScript的对象写法，这里是一个匿名对象），前缀是class，这个对象的域是在data对象中。

data: {
  isActive: true,
  hasError: false
}

还可以这么写：
<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

这里是一个具名对象。

这个对象也可以是一个计算属性。

数组语法

数组的原理是一样的，语法类似下面：
<div v-bind:class="[activeClass, errorClass]"></div>

以数组的形式嵌入，定义在：

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

data对象的两个域。

用在组件上

还没有看到组件一节，先略过。

绑定内联样式

对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：

这里使用的还是对象，不过前缀变成了style。

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}

这个是匿名对象的例子，感觉语法和class一样，可能只是优先级不一样。

具名对象：

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

数组语法

类似上面。

自动添加前缀

这里涉及浏览器前缀的一些知识，参考这里。

摘抄一段：

浏览器厂商们有时会给一些在试验阶段和非标准阶段的css属性或JavaScript API添加前缀, 这样开发者就可以在使用这些试验阶段的代码时能够确保不会被其他标准代码所依赖而导致破坏标准WEB代码的问题。开发人员应该等到浏览器行为被标准化之后再取消前缀。

例如经常看到的：

-webkit- (谷歌, Safari, 新版Opera浏览器等)
-moz- (火狐浏览器)
-o- (旧版Opera浏览器等)
-ms- (IE浏览器和 Edge浏览器)

多重值

摘抄记录：

从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。

总结

这篇内容主要涉及了在Vue中怎么设置CSS，这里涉及了CSS的class和style，这里需要总结一下。

设置CSS一共有三种方式：

内联 - 使用HTML元素的style属性，例如：

<h1 style="color:blue;">This is a Blue Heading</h1>

内部 - 使用<head>区域的<style>元素，例如：

<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

外部 - 使用外部的CSS文件

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

还有一个优先级的关系，可以参考这里。

参考

https://cn.vuejs.org/v2/guide/class-and-style.html
https://developer.mozilla.org/zh-CN/docs/Glossary/Vendor_Prefix
https://www.w3schools.com/html/html_css.asp