web前端vue：是这样绑定vue的Class与Style

vue页面结构

大家都知道vue是以数据为驱动，不像传统的开发方式是以点击事件来驱动的怎么一个东东。vue我也接触了一个不短的时间了，从最初的不适应到现在运用的熟悉（不适应是用惯了Jquery的“$”还真不习惯vue的这套）但是呢！技术都是在进步的，你不进步就意味着被淘汰。

学过vue的肯定都知道vue的指令吧？传统网页制作要动态的改变页面上的样式，是要写不少东东吧比如：一个触发的事件，写好两种状态的样式，写好js或者jquery（当然还有些伙伴是直接写在js或jquery里，这是相对于样式少的才会怎么做），而vue因为数据驱动它感觉上就没有那么繁琐了比如以下例子：

<style>
.a{background-color:#f00;}
.b{background-color:#000;}
</style>
<template>

<div v-bind:class="[style1 ?  'a' : 'b']">样式1</div>
<div :class="[style1 ?  'a' : 'b']">样式1</div>  // 简写

<div v-bind:style="{color: #f00, fontSize: fontSize + 'px'}">样式2</div>
<div :style="{color: #f00, fontSize: fontSize + 'px'}">样式2</div> // 简写

</template>
<script>
export default {
data () {
style1: false,
fontSize: 20
}
}</script>
这是vue的样式class和style两种动态改变的例子，style1相当于一个变量，它可以随便放在页面的位置上改变它的值，而v-bind:class和v-bind:style是vue固定的指令，它会监听style1和fontSize的值是否改变做出相印判断，:style的形式有点像传统的内联样式写法，但它也是实时监听的。

传统的（js/jquery）例子我就不献丑了，大家有感兴趣vue的欢迎加我一起学习（微信：nihaomeili87）