vue中利用 :class或 :style实现样式绑定

html:

<template>
  <div>
    <h1 :class="{'addStyle':visible}">hello vue</h1>
    <p :style="{color:addColor}">世界，晚安</p>
  </div>
</template>

css:

.addStyle{
  color:red;
}

js:

<script>
export default {
  data(){
    return {
      visible: true,
      addColor:'#008c8c'
    }
  }
}
</script>

总结：推荐一个简单的记忆方法来学习vue的样式绑定，无论绑定的是样式类还是样式属性，:class 和 :style表达式内一定是一个JSON对象。

• :class的JSON对象的值一定是布尔型的，true表示加上样式，false表示移除样式类。

• :style的JSON对象则像是一个样式配置项，key声明属性名，value则是样式属性的具体值