当style和class为动态属性时，其属性值需要是JSON格式（class还可以是数组格式）。
style -- <div :style="{'width':'200px', 'height'='200px'}"></div>
class -- <span :class="{'warning':content.length > 140}">{{content.length}}/150</span>
在学习前端之初编程讲究结构层，行为层，样式层三层分立，使用Vue后由于html参与程序的逻辑编辑使得程序编辑过程简化了许多。
针对style属性，下面写一个调色板为例：
html:
JS:
效果：
针对class属性，下面写一个输入框为例：
html:
在这里，class的属性值为动态，可以直接写逻辑语句，warning类是否被添加，取决于content字数是否大于140。一些简单的逻辑也可以直接写在@click事件里。如此种种便是html参与了逻辑编辑。
像这样的重逻辑出现在template中表现为各种“指令”，包括v-model, :, @等。
JS:
效果：
class的动态属性值为JSON格式时该属性值通过true/false的逻辑被操控，而当为数组时则可以直接在逻辑中操作值，通常情况下，数组写法适用于有多个类名需要被单次操作的元素，JSON写法则适用于类名需要反复被操作的元素，
