样式

@style

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

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

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

内联样式 :style

内联样式是值对的集合

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

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

使用vue devtool调试

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

如果使用了数据绑定，需要使用 {}；否则不需要，如静态样式或模板字符串

常见静态样式

简单属性和复合属性

<div style="color: #f40;">hi,there</div>
<div style="fontSize: 20px">hi,there</div>
<div style="background-color: #f40;">hi,there</div>
<div style="background-image: url(./todo/todo0.jpg)">hi,there</div>
<div style="backgroundColor: #f40;">hi,there</div>

常见绑定样式

为了和绑定的数据|样式值区分，建议：样式属性 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="{ 'lineHeight': h + 'px' }">content</div>

<div :style="{ 'backgroundImage': 'url(' + imgUrl + ')' }">content</div>
<div :style="{ 'background-image': 'url(' + imgUrl + ')' } ">content</div>

模板字符串 - 不使用 {}

<div :style="`background-image:url(${imgUrl})`">content</div>

模板字符串不支持小驼峰写法

<div :style="`backgroundImage:url(${imgUrl})`">content</div>

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

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

使用计算属性 - computed

[] 背景图片的使用

静态使用 - 仅可以引用 public 中的资源

<div style="background-image: url('/imgs/lg.jpg');">hi,there</div>

动态绑定 - 引入为资源；图片可以放任意地方

import url from '../assets/imgs/0.jpg'

<div class="box" :style="{ backgroundImage: 'url(' + src + ')' }">hi,there</div>
<div class="box" :style="{ backgroundImage: 'url(' + url + ')' }">hi,there</div>