Class 与 Style 绑定

本节目标：理解“Class 与 Style 绑定”的核心思路，并能把它用于实际开发或面试表达。 ==操作元素的== class ==列表和内联样式是数据绑定的一个常见需求。因为它们都是== attribute==，所以我们可以用== v-bind ==处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将== v-bind ==用于== class ==和== style ==时，==Vue.js ==做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。==

==绑定== HTML Class

==对象语法== ==对象键为类名称，键值为====true====是类生效，否则不生效；== ==我们可以传给== :class

(v-bind:class

==的简写==) ==一个对象，以动态地切换== class==：==

<div :class="{ active: isActive }"></div>

==上面的语法表示== active ==这个== class ==存在与否将取决于== data property isActive ==的==

truthiness

==。== ==你可以在对象中传入更多字段来动态切换多个== class==。此外，==:class ==指令也可以与普通的== class attribute ==共存。当有如下模板：==

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

==和如下== data==：==

data(){return{isActive:true,hasError:false}}

==渲染的结果为：==

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

==当== isActive ==或者== hasError ==变化时，==class ==列表将相应地更新。例如，如果== hasError ==的值为== true==，==class ==列表将变为== "static active text-danger"==。== ==绑定的数据对象不必内联定义在模板里：==

<div :class="classObject"></div>
data(){return{classObject:{active:true,'text-danger':false}}}

==渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的====计算属性====。这是一个常用且强大的模式：==

<div:class="classObject"></div>

data() {
  return {
    isActive: true,
    error: null
  }
},
computed: {
  classObject() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

==数组语法== ==每一个数组元素为一个类名称；如果数组元素为一个对象时，则参考对象类名的定义；== ==我们可以把一个数组传给== :class==，以应用一个== class ==列表：==

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

data(){return{activeClass:'active',errorClass:'text-danger'}}

==渲染的结果为：==

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

==如果你想根据条件切换列表中的== class==，可以使用三元表达式：==

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

==这样写将始终添加== errorClass==，但是只有在== isActive ==为== truthy

[1]

==时才添加== activeClass==。==

==组合使用数组和对象== ==不过，当有多个条件== class ==时这样写有些繁琐。所以在数组语法中也可以使用对象语法：==

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

==在组件上使用== ==这个章节假设你已经对==

Vue

==组件====有一定的了解。当然你也可以先跳过这里，稍后再回过头来看。== ==当你在带有单个根元素的自定义组件上使用== class attribute ==时，这些== class ==将被添加到该元素中。此元素上的现有== class ==将不会被覆盖。== ==例如，如果你声明了这个组件：==

const app = Vue.createApp({})
app.component('my-component', {
  template: `<p class="foo bar">Hi!</p>`
})

==然后在使用它的时候添加一些== class==：==

<div

id="app"><my-component class="baz boo"></my-component></div>
HTML

==将被渲染为：==

<p

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

==对于带数据绑定== class ==也同样适用：==

<my-component :class="{ active: isActive }"></my-component>

==当== isActive ==为== truthy

[1]

==时，==HTML ==将被渲染成为：==

<p

class="foo bar active">Hi</p>

==如果你的组件有多个根元素，你需要定义哪些部分将接收这个== class==。可以使用== $attrs ==组件== property ==执行此操作：==

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

==你可以在====非== Prop ==的== Attribute ==小节了解更多关于组件属性继承的信息。==

==绑定内联样式==

==对象语法== :style ==的对象语法十分直观——看着非常像== CSS==，但其实是一个== JavaScript ==对象。==CSS property ==名可以用驼峰式== (camelCase) ==或短横线分隔== (kebab-case==，记得用引号括起来==) ==来命名：==

<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'}}}

==同样的，对象语法常常结合返回对象的计算属性使用。==

==数组语法== :style ==的数组语法可以将多个样式对象应用到同一个元素上：==

<div:style="[baseStyles, overridingStyles]"></div>

==自动添加前缀== ==在== :style ==中使用需要一个==

vendor prefix

(==浏览器引擎前缀==) ==的== CSS property ==时，==Vue ==将自动侦测并添加相应的前缀。==Vue ==是通过运行时检测来确定哪些样式的== property ==是被当前浏览器支持的。如果浏览器不支持某个== property==，==Vue ==会进行多次测试以找到支持它的前缀。==

==多重值== ==可以为== style ==绑定中的== property ==提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：==

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

==这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的== flexbox==，那么就只会渲染== display: flex==。== ==译者注== [1] truthy ==不是== true==，详见==

MDN

==的解释。== > 来自

 <https://v3.cn.vuejs.org/guide/class-and-style.html#%E6%95%B0%E7%BB%84%E8%AF%AD%E6%B3%95-2>

Class 与 Style 绑定 ​

Class 与 Style 绑定