1、Classes html 绑定

{样式名称：是否显示判断变量}。

对象

<div :class="{ active: isActive }"></div>
<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

数组

数组由样式名称组成。

<div :class="[activeClass, errorClass]"></div>
data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

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

组件

const app = Vue.createApp({})

app.component('my-component', {
  template: `<p class="foo bar">Hi!</p>`
})
<div id="app">
  <my-component class="baz boo"></my-component>
</div>
<p class="foo bar baz boo">Hi</p>
<my-component :class="{ active: isActive }"></my-component>
<p class="foo bar active">Hi</p>

<div id="app">
  <my-component class="baz"></my-component>
</div>
const app = Vue.createApp({})

app.component('my-component', {
  template: `
    <p :class="$attrs.class">Hi!</p>
    <span>This is a child component</span>
  `
})

1、Styles html 绑定

对象

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}
<div :style="styleObject"></div>
data() {
  return {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
}

<div :style="[baseStyles, overridingStyles]"></div>
data() {
      return {
            baseStyles:'color:red',
           overridingStyles:'background: yellow;',        
   }
},

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>