样式

@style

Introduction

类 class 和内联样式 style 都是元素的属性 attribute，使用 v-bind 将它们和动态的字符串绑定

v-bind: 可以简写为冒号:

除了字符串外，表达式的值也可以是对象或数组

内联样式 style

内联样式是值对 key-value pair 集合

复合 CSS 属性可以使用小驼峰 camelCase，也支持短划线 kebab-cased；推荐使用小驼峰 camelCase，因为静态使用和动态绑定写法一致

注意双引号和单引号的配套使用

特别的，background-image 等使用了 url()、linear-gradient() 等等 CSS 函数的属性，静态使用仅可以引用 public 中的资源；动态绑定使用 - 同图片 src 的使用

<div style="color: #f40;">hi,there</div>
<div style="fontSize: 20px">hi,there</div>
<div style="font-size: 20px">hi,there</div>
<div style="background-color: #f40;">hi,there</div>
<div style="backgroundColor: #f40;">hi,there</div>

类的绑定使用能满足大多场景，不要纠结于内联样式的使用

绑定对象

绑定的是值 value

为了和绑定的数据|样式值区分，建议：key 使用引号括起来

直接指定样式值 - 复合 CSS 属性

<div :style="{ 'color': txtColor }">hi,there</div>
<div :style="{ 'background-color': color }">content</div>
<div :style="{ 'backgroundColor': color }">content</div>

拼接样式值 - 数值和单位

<div :style="{ 'fontSize': small + 'px' }">hi,there</div>
<div :style="`font-size: ${small}px`">hi,there</div>
//模板字符串不支持小驼峰写法！！！
<div :style="`fontSize: ${small}px`">hi,there</div>//x

多样式使用逗号，分隔，渲染时变为分号;

<div :style="{ 'backgroundColor': color, 'lineHeight': h + 'px' }">content</div>

绑定数组

同类的数组绑定，应用较少

[] 标签页 - 使用对象绑定内联变量

<nav class="nav">
  <div class="item" @click="navInd = 0">Lorem.</div>
  <div class="item" @click="navInd = 1">Neque?</div>
  <div class="item" @click="navInd = 2">Incidunt.</div>
  <div class="item" @click="navInd = 3">Quidem!</div>
  <div class="line" :style="{ '--ind': navInd }"></div>
</nav>

import { ref } from 'vue'
const navInd = ref(0)

// 其它样式

.line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80px;
  height: 2px;
  background: #f40;
  transform: translateX(calc(80px * var(--ind)));
  transition: 0.5s;
}