前军教程网

基本写法：

动态class :class="{类名: true/false，类名: true/false，...}" true生效, false无效

:class="[ 类名1，类名2, ...]" :class=[ 三元表达式 ]

动态style :style="{属性名:值}" :style="[ 样式一，样式二，...]"

class写法

<!-- <div :class="{active: true}"> -->
    <div class="static"  :class="{active: idActive , 'text-danger': hasError}">
      内容
    </div>
const idActive = ref(true)
const hasError = ref(false)
.active {
  color: red;
}

渲染结果：内容

<div class="static active">内容</div>

==============

<div :class="[activeClass, errorClass]"></div>

const activeClass = ref('active')
const errorClass = ref('text-danger')

渲染：

<div class="active text-danger"></div>

=========

<div :class="[isActive ? activeClass : '', errorClass]"></div>

=======

在组件中使用：这里需要注意父组件中的样式

<!-- 子组件模板   -->  ********  单根节点时   
<p class="foo bar">Hi!</p>

<!-- 在使用组件时（父组件） -->  ****baz boo的样式会影响到子组件样式
<MyComponent class="baz boo" />

渲染：

<p class="foo bar baz boo">Hi!</p>

==========

<!-- MyComponent 模板使用 $attrs 时 ，这里不做过多说明 -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>

<MyComponent class="baz" />

渲染：

<p class="baz">Hi!</p>
<span>This is a child component</span>

=========

style写法：

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

const activeColor = ref('red')
const fontSize = ref(30)

============

<div :style="styleObject"></div>  //推荐写法，这样模板更简洁
const styleObject = reactive({
  color: 'red',
  fontSize: '13px'
})

渲染结果

<div style="color:red ; fontSize: 30px; "></div>

也可以绑定为数组

<div :style="[proStyles, devStyles]"></div>