class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
文末名片获取源码
精彩专栏持续更新推荐订阅，收藏关注不迷路

微信小程序实战开发专栏

一. 样式绑定

1.1 动态指定

开始前的准备工作如下：预设好的style样式，html容器以及vue实例对象

启动项目后效果如下

<style>
    .basic{
        width: 200px;
        height: 200px;
        color: black;
        border:1px solid black;
    }
    .basic2{
        width: 200px;
        height: 200px;
        color: white;
        background: green;
    }
    .cat1{
        width: 200px;
        height: 200px;
        color: green;
    }
    .cat2{
        background: yellow;
    }
    .cat3{
        font-weight: bold;
    }
</style>
<div class="basic" :class="classIcon" @click="changeBackground">
     {{name}}
 </div>

目前所看到的样式效果是我们在style中定义的同时通过class进行指定的，那么需求就来了，如何做到点击div的时候给它换一个背景色呢?

在JS中是可以通过操作dom的方式来修改元素的class属性的

var div = document.getElementById("div1");
div.className = "style2";
div.setAttribute("class","style2");

但是既然使用了vue，入乡随俗肯定要用vue的方式来解决，而且用传统的方式来修改也有着不确定性，因为在界面中，需要操作的元素样式可能是不断变化的；

在标签中通过v-bind简写的方式再增加一个class，同时增加一个点击事件

在css定义好basic2的样式，启动项目，可以看到当点击div时，字体以及背景颜色都发生了变化，这说明动态指定class的事件生效了

在网页右击查看源代码可以看到，div上面的class只剩一个了，但是我们代码里面是两个，这是因为动态指定的class样式最终会自行汇聚成一个正常的class样式

1.2 数组写法

这一小节要讲的是针对与样式的个数以及名字不确定的场景，通过数组写法绑定class样式

首先在style中准备三个不同效果的class样式

.cat1{
    width: 200px;
    height: 200px;
    color: green;
}
.cat2{
    background: yellow;
}
.cat3{
    font-weight: bold;
}

在vue实例中定义一个数组并将class名进行指定

在html中的div标签中对arr进行绑定

<div :class="arr">
    {{name}}
</div>

运行项目可以看到数组方式的样式也绑定上去了，数组方式绑定class样式适用于样式的个数以及名字不确定的场景

1.3 对象写法

对象写法绑定class样式，适用于样式的个数以及名字都确定的场景,但是要根据业务场景动态决定是否使用，可以简单应用到当切换tab时根据不同的下标展示不同的效果

在vue实例data中定义对象如下，以普通的键值对方式存储，键为需要绑定的class名称，值为bool类型，需要展示则为true，反之则为false

info:{
  'cat1':false,
    'cat2':false,
},

在页面标签中对样式进行绑定，因为在数据中两个class都为false，所以页面解析后是没有任何样式绑定的

将定义的值修改为true，再次刷新页面，这一次就能渲染上去了

1.4 内联样式

内联样式绑定,适用于需要在行内根据数据形态做不同的展示的场景，常规的内联样式如下

<div class="basic" style="color:red;">{{name}}</div>

在vue中还是通过v-bing简写的方式进行绑定，不过需要加上单括符，不要忘了在data中进行定义

<div class="basic" :style="{color:fontColor}">{{name}}</div>