• vue中使用样式： 若干个元素的样式变化较少时（例如字体等变化时），可以节约代码使用v-bind绑定样式，比起写单独的css是不是减少了一些冗余语句呢？

<template>
<div class='main'>
    <el-button>hahahha</el-button>
    <!-- 第一种，绑定class -->
    <h2 :class="['thin','ita',{'active':flag},'red']">Moonlight Mile</h2>
    <!-- 第二种 ，绑定style-->
    <h2 :style="{'font-size':'15px'}">{{h2msg}}</h2>
    <!-- 第三种，绑定style -->
    <h2 :style="style1">Oye Como Va</h2>
</div>
</template>
<script>
export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data() { // 这里存放数据
    return {
      flag: true,
      h2msg: 'Take Another Look',
      style1: { 'color': 'red', 'font-weight': '100', 'font-family':
      '-apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, Oxygen, Ubuntu, Cantarell, \'Open Sans\', \'Helvetica Neue\', sans-serif' }
    };
  },
};
</script>
<style lang='scss' scoped>
// @import url(); 引入公共css类
.thin {
  font-weight: 100
}
.ita {
  // font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-style: italic
}
.active {letter-spacing: 0.5em}
.red {color: red}

</style>

• 效果图：
•