[油猴脚本开发指南]CSS属性绑定
# 前文在传统网页开发中，我们可以使用class和style
但是在vue中，我们不仅可以使用class和style
更可以通过bing函数，也就是:来动态设置class和style
这里有多种写法，我们可以浅尝截止一下
# 对象语法
```js
<div :class="{ active: isActive }"></div>
```
这里isActive变量的真假来控制active的class名的存在与不存在
:class与class可以共存
```js
<div
class="static"
:class="{ active: isActive, 'text-danger': hasError }"
></div>
```
期期中isActive以及hasError控制类名的存在与不存在
假设isActive为真，而hasError为假
则渲染的结果为
```js
<div class="static active"></div>
```
当数据的变化发生改变，则会相应的进行动态更新
我们也可以:bind上一个对象，对象包含上述的内容
```js
<div :class="classObject"></div>
```
```js
data() {
return {
classObject: {
active: true,
'text-danger': false
}
}
}
```
同理，只要符合数据格式的响应式对象即可，我们也可以绑定一个计算属性
```js
<div :class="classObject"></div>
```
```js
data() {
return {
isActive: true,
error: null
}
},
computed: {
classObject() {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
```
# 数组语法
我们除了给:class绑定一个对象，也可以绑定一个数组，如
```js
<div :class=""></div>
```
```js
data() {
return {
activeClass: 'active',
errorClass: 'text-danger'
}
}
```
则绑定的结果为
```js
<div class="active text-danger"></div>
```
我们也可以在数组中使用三元表达式，来动态的计算数组中返回的数据变量或字符串
```js
<div :class=""></div>
```
该表达式errorClass始终存在，而activeClass根据isActive的值来判断
我们也可以在数组中使用对象语法，但是这种我们通常不会使用
```js
<div :class="[{ active: isActive }, errorClass]"></div>
```
# 在组件上使用
假如我们声明了一个组件
```js
const app = Vue.createApp({})
app.component('my-component', {
template: `<p class="foo bar">Hi!</p>`
})
```
同时在调用该组件的父组件添加了一个动态的class
```js
<div id="app">
<my-component class="baz boo"></my-component>
</div>
```
则组件的class与组件自身的class会融合在一起
在Vue3中，可以声明多个根节点，当存在多个根节点的时候，使用$attrs属性来进行融合父组件设置的class
```js
<div id="app">
<my-component class="baz"></my-component>
</div>
```
```js
const app = Vue.createApp({})
app.component('my-component', {
template: `
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>
`
})
```
# 总结
我们可以对动态class设置一个对象，或一个数组
如果是对象，类名在前，真假在后，如果是数组，则可以使用三元表达式
数组和对象可以结合
# 内联样式
CSS属性名可以使用驼峰式，如camelCase或短横线分割kebab-case，style动态跟动态class的用法基本一致
```js
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
```
```js
data() {
return {
activeColor: 'red',
fontSize: 30
}
}
```
我们也可以直接绑定一个样式对象
```js
<div :style="styleObject"></div>
```
```js
data() {
return {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
}
```
同理也可以使用计算属性
# 数组语法
同理，我们也可以设置多个样式对象到同一个数组上
```js
<div :style=""></div>
```
# 自动添加前缀
css具有很多实验性的特性，浏览器厂商为了兼容这些特性，同时不与其他浏览器冲突
所以经常会添加一个特殊的前缀
如transition，有-moz-，-ms-，-webkit-，等等
一开始一个厂商会具有一个前缀，而后来为了抢占市场分量，开始互相兼容对象前缀
如果我们正常写css代码，我们需要自己写前缀
也可以使用scss编译，自动添加前缀
而在vue中
vue将会自动侦测并且添加响应的前缀，vue会在运行时检测哪些样式的属性是被浏览器所支持的
如果不支持某个属性，会通过多次尝试来找到支持他的前缀
(这里个人并没有特别理解，大概翻了一下源码也没翻到)
感觉不像是autoprefix，而是根据js代码检测特定前缀来进行处理的？
# 多重值
可以在style绑定的过程中，为属性提供一个包含多个值的数组，提供多个带前缀的值，例如
```js
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
```
这样只会渲染数组中最后一个被浏览器支持的值。
# 结语
我们只需要记住绑定动态class以及style的时候可以是数组形式，也可以是对象形式，会自动添加前缀
需要的时候查什么即可。
撒花~
哥哥牛逼 哥哥这些markdown都有整理么？
论坛的观感好差。。。
王一之 发表于 2022-2-24 10:01
哥哥这些markdown都有整理么？
论坛的观感好差。。。
还没....最近在研究vue3+ts舒服一点的写法...
我晚上就开始整理
页:
[1]