先去下载一个 css 框架，比如 semantic ui ... 把它放到项目的根目录的下面 .. 再打开这个 html 文档，把下载的样式表嵌入到这个文档里面，这样我们就可以使用 semantic ui 给我们提供的样式了 ... 让页面更好看一点，我们再添加点东西 ... div.ui.container ，一个容器 ... 再加上一个分隔符 ... div.ui.hidden.divider ..

然后添加一个 button 元素 ... 设置一下按钮上的文字 ... 然后我想在这个元素上动态的去应用一些 css 类 ... 可以使用 v-bind 指令，绑定 class 这个属性 ...

我们可以给它提供一个对象，或者数组，先给它一个数组， 然后添加一个 buttonClass .. 逗号分隔一下，再添加一个表示颜色的 colorClass ...

在应用的数据里，添加一个 buttonClass ... 把它的值设置成 ui button ... 再添加一个 colorClass ... 先让它等于 violet ... 紫罗兰 ...

再到浏览器上看一下 .. 页面上会显示一个按钮 ... 这个元素的上面会应用一个 ui button 还有一个表示颜色的 violet .. 我们可以去动态的设置一下按钮的颜色 ...

有些 css 类你可能希望根据某个值动态的添加 ... 在这个数组里添加一个对象 .. loading: isLoading ... 它的意思就是，如果应用里的 isLoading 的值是 true 的话，就在这个元素上添加一个 loading 这个 css 类 ...

添加一个 isLoading ... 让它的值先等于 false ...

回到浏览器 ... 按钮没有什么变化 ... 我们再去动态的设置一下 isLoading 的值 ... 让它等于 true ...

现在，页面上显示的这个按钮元素的上面，先应用一个 loading 这个 css 类 ... 你会发现这个按钮会有一个动画效果，表示它现在的状态是正在加载 ...