VUE 比较函数和计算属性 + class数据绑定 +style 数据绑定

计算属性 computed computed 选项定义计算属性
计算属性 类似于 methods 选项中定义的函数
计算属性 会进行缓存，只在相关响应式依赖发生改变时它们才会重新求值。
函数 每次都会执行函数体进行计算。
需求：输入数学与英语分数，采用 methods 与 computed 分别计算出总得分
监听器 watch
当属性数据发生变化时,对应属性的回调函数会自动调用, 在函数内部进行计算
通过 watch 选项 或者 vm 实例的 $watch() 来监听指定的属性
需求：

1. 通过 watch 选项 监听数学分数， 当数学更新后回调函数中重新计算总分sumScore3
2. 通过 vm.$watch() 选项 监听英语分数， 当英语更新后回调函数中重新计算总分sumScore3

Class 与 Style 绑定 v-bind
通过 class 列表和 style 指定样式是数据绑定的一个常见需求。它们都是元素的属性，都用 v-bind 处理，其中表达式
结果的类型可以是：字符串、对象或数组。
2.6.1 语法格式
v-bind:class=‘表达式’ 或 :class=‘表达式’
class 的表达式可以为：
字符串 :class=“activeClass”
对象 :class="{active: isActive, error: hasError}"
数组 :class="[‘active’, ‘error’]" 注意要加上单引号,不然是获取data中的值
v-bind:style=‘表达式’ 或 :style=‘表达式’
style 的表达式一般为对象
:style="{color: activeColor, fontSize: fontSize + ‘px’}"
注意：对象中的value值 activeColor 和 fontSize 是data中的属性