Vue动态样式绑定

本小节我们将介绍 Vue 中如何动态绑定样式。包括  的绑定、内联样式  的绑定。掌握样式绑定的多种形式是其中的重点难点。同学们可以在学完本小节之后对样式的绑定方式加以总结，再通过反复的练习来加深印象。

2. 解释

操作元素的  列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于  和  时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 ---- 官方定义

通过 v-bind 指令给 DOM 元素动态绑定  和 ，一般用于根据不同数据状态切换元素样式的场景下。

2.绑定元素的

我们可以通过数组和对象的两种形式绑定元素的 。

2.1 对象

2.1.1 对象语法

通过传给 v-bind: 一个对象，以动态地切换 ：

<div v-bind:="{ show: isShow }"></div>

代码解释：
上面的语法表示 show 这个  存在与否将取决于数据属性 isShow 是否为真值。