Vue之Class与style的动态绑定

这周在做项目的时候，遇到一个问题：有两个按钮，用户在登录的时候，需要选择不同的登录方式，选中的那个按钮是一种样式，未选中的是另一种样式，这难住了还未深入接触Vue的我，于是我看了下Vue官网，把自己对这块的内容整理了下。

要达到这个效果，需要把样式做动态绑定。也就是说，我们需要在点击按钮的时候重新绘制按钮的CSS样式，在Vue里的语法为：

<div class="class1" :class="{ active : isActive }"></div>

这样我们就把div与名为active的class绑定起来了，可以通过数据isActive是否为true来判断，如果在isActive为false的时候，我们的class就为class="class1" ，如果isActive为true的时候，class就为class="class1 active"，这样我们就实现了样式动态改变的要求了。