Vue的class、style绑定

    Vue中的样式也要回到原始的BOM+DOM+js的前端组合去解读。

1、当模板直接引用style中定义的样式时，在HTML模板中按照正常的样式引用处理即可。

模板定义：
 
<template>
<div class="sizeclass">100div>
template>
 
<style>
.sizeclass {
  text-align: center;
  font-size: large;
}
style>

2、当需要根据响应式状态改变模板中引用的class、style时，需要利用计算属性改变样式的引用

既然可以动态改变class，那么HTML模板中style属性也是可以动态改变的。都是HTML的属性，style和class没有什么区别，顶多是style要以对象的形式，class以字符串的方式存在。

 
<template>
<button @click="increment">{{ count }}button>
<div v-for="item in list" :key="item">
        <span>{{ item }}span>
div>
<div :class="currentClass">{{ size }}div>
template>
 
<style>
.sizeclass {
  text-align: center;
  font-size: large;
}
 
.smallclass{
  text-align: left;
  font-size: smaller;
  font-weight: 100;
}
style>

3、在多个组件嵌套时，HTML模板中的style、class

      当多组件嵌套时，内层组件的样式一定是在外层组件样式的基础上合并计算出来的。回归到BOM+DOM+js的前端，子节点的样式一定是基于父节点的样式上进行生效的。显然Vue也只是一种对前端的重新组合，并不会改变原先DOM下样式的规则。