如何在 Vue 中进行样式绑定和scoped CSS？

在 Vue 中，可以使用 v-bind 指令来进行样式绑定。此外，为了实现组件的样式模块化，通常会在style标签中添加scoped属性，使组件之间的样式相互独立，不对全局造成污染。添加scoped属性后，Vue 会为该组件自动添加一个唯一的data-v-hash属性，以对模块进行标识。下面是一个示例，展示了如何在 Vue 中进行样式绑定和使用scoped CSS：

<template>
  <div>
    <!-- 使用 v-bind 指令进行样式绑定 -->
    <div :class="{
    'demo': isDemo}" :style="stylesObject">demo</div>
    <!-- 使用 scoped 属性 -->
    <style scoped>
      .demo {
    
        color: red;
      }
    </style>
  </div>
</template>

<script>
export default {
    
  data() {
    
    return {
    
      isDemo: true,
      stylesObject: {
    
        backgroundColor: 'blue',
        fontSize: '20px'
      }
    };
  }
};
</script>

在上述示例中，使用了v-bind指令来动态切换元素的class，并通过:style指令来设置内联样式。同时，还使用了scoped属性来限制样式的作用范围，使其只适用于当前组件。