class与style绑定-2

上一讲中我们讲解了绑定对象的相关使用，这一讲中我们讲解更多的使用方式。

绑定数组

可以给:class绑定一个数组来渲染多个class属性。

<div :class="[activeClass, btnClass]" >确定</div>
<div :class="[errClass, btnClass]" >危险</div>

const activeClass = ref('active')
const errClass = ref('err')
const btnClass = ref('btn')

<div class="activeClass, btnClass" >确定</div>
<div class="errClass, btnClass" >危险</div>

在数组中使用三元运算符

<!-- activeClass的值和errClass的值在于active是false还是true -->
<!-- btnClass的值一直存在 -->
<div :class="[active? activeClass : errClass, btnClass]" >确定</div>

const activeClass = ref('active')
const errClass = ref('err')
const btnClass = ref('btn')

const active = ref(true)

<div class="activeClass, btnClass" >确定</div>

<div :class="[ {activeClass: active} : errClass, btnClass]" >确定</div>

在组件中的使用

如果你还没有组件的基础，可以现在了解，后续会深入讲解组件的相关知识。

对于只有一个根元素的组件，给该组件使用class添加属性时，这些属性被添加到该组件的根组件上，并且会和已有的属性合并。举例如下：

<!-- 按钮组件的模板 -->
<!-- 只有一个根元素的组件 -->
<div class="active">确定</div>

<!-- 使用自己封装的按钮组件 -->
<myBtn class="btn" />

最终渲染后的代码

<div class="btn active">确定</div>

如果组件有多个根元素，需要指定哪个根元素来接收这个class属性，则可以使用$attrs来实现:

<!-- 按钮组件的模板 -->
<!-- 两个根元素的组件，使用`$attrs`属性 -->
<div :class="$attrs.calss">确定</div>
<div>验证码错误</div>

<!-- 使用组件 -->
<myBtn class="btn" />

最终被渲染成:

<div class="btn">确定</div>
<div>验证码错误</div>

绑定内联样式

绑定对象

style:可以绑定响应式数据

<p :style="{color: attrColor, fontSize: fontSize + 'px'}">Vue</p>

const attrColor = ref('red')
const fontSize = ref(20)

直接绑定一个对象:

<p :style="styleObject">Vue</p>

const styleObject = reactive({
  color: '#42b883',
  fontSize: '30px'
})

Note: 也和class一样使用计算属性

绑定数组

包含多个样式对象的数组

<div :style="[colorObj, sizeObj]"><div>

const colorObj = reactive({ 
    color: 'red'
})

const sizeObj = reactive({ 
    fontSize: '30px'
})