v-if和v-show不能同时使用（v-bind及class）

DOM 元素经常会动态地绑定一些 class 类名或 style 样式。

一、了解 v-bind 指令

v-bind 指令的主要用法是动态更新 HTML 元素上的属性，可使用 v-bind 指令绑定 class 和 style 。如下，示例：

<div id="app"> <a v-bind:href="url">我是一个链接</a> <img v-bind:src="http://img.studyofnet.comimgUrl"> <!-- 缩写为 --> <a :href="url">我是一个链接</a> <img :src="http://img.studyofnet.comimgUrl"> </div> <script> var app = new Vue({ el: "#app", data: { url: 'https://www.github.com', imgUrl: 'http://bingbinlee.com/img.pang' } }) </script>

链接的 href 属性和图片的 src 属性都被动态设置了，当数据变化时，就会重新渲染。

在数据绑定中，最常见的两个需求就是元素的样式名称 class 和内联样式 style 的动态绑定，它们也是 HTML 属性，因此可以使用 v-bind 指令。只需要用 v-bind 计算出表达式最终的字符串也可以，不过有时候表达式的逻辑较为复杂，使用字符串拼接方法较难阅读和维护，所以 Vue.js 增强了对 class 和 sytle 的绑定。

二、绑定 class 的几种方式

2.1 对象语法

给 v-bind:class 设置一个对象，可以动态地切换 class ，例如：

<div id="app"> <div :class="{ 'active': isActive }"></div> </div> <script> var app = new Vue({ el: "#app", data: { isActive: true } }) </script>

上面示例中，类名 active 依赖于数据 isActive, 当其为 true 时，div 会拥有类名 Active，为 false 时则没有，所以上例最终渲染完的结果是：

<div class="active"></div>

对象中也可以传入多个属性，来动态切换 class 。另外，:class 可以与普通 class 共存，例如：

<div id="app"> <div class="static" :class="{ 'active': isActive, 'error': isError}"></div> </div> <script> var app = new Vue({ el: '#app', data: { isActive： true, isError: false } }) </script>

:class 内的表达式每项为真时，对应的类名就会加载，上面渲染后的结果为：

<div class="ststic active"></div>

当数据 isActive 或 isError 变化时，对应的 class 类名也会更新。比如当 isError 为 ture 时，渲染后的结果为：

<div class="static active error"></div>

当 :class 的表达式过长或逻辑复杂时，还可以绑定一个计算属性，这是一种很友好和常见的用法，一般当条件多于两个时，都可以使用 data 或 computed ，例如使用计算属性：

<div id="app"> <div :class="classes"></div> </div> <script> var app = new Vue({ el: "#app", data: { isActive: true, error: null }, computed: { classes: function () { return { active: this.isActive && !this.error, 'text-fail': this.error && this.error.type === 'fail' } } } }) </script>

除了计算属性，也可以直接绑定一个 Object 类型得数据，或者使用类似计算属性的 methods 。

2.2 数组语法

当需要应用多个 class 时，可以使用数组语法，给 :class 绑定一个数组，应用一个 class 列表：

<div id="app"> <div :class="[activeCls, errorCls]"></div> </div> <script> var app = new Vue ({ el: "#app", data: { activeCls: 'active', errorCls: 'error' } }) </script>

渲染后的结果为：

<div class="active error"></div>

也可以使用三元表达式来根据条件切换 class ，例如下面的示例：

<div id="app"> <div :class="[isActive ? activeCls : '', errorCls]"></div> </div> <script> var app = new Vue ({ el: '#app', data: { isActive: true, activeCls: 'active', errorCls: 'error' } }) </script>

样式 error 会始终应用，当数据 isActive 为真时，样式 active 才会被应用。class 有多个条件时，这样写较为烦琐，可以在数组语法中使用对象语法：

<div id="app"> <div :class="[{ 'active': isActive}, errorCls]"></div> </div> <script> var app = new Vue ({ el: "#app", data: { isActive: ture, errorCls: 'error' } }) </script>

当然，与对象语法一样，也可以使用 data、computed 和 methods 三种方法，以计算属性为例：

<div id="app"> <button :class="classes"></button> </div> <script> var app = new Vue ({ el: '#app', data: { size: 'large', disabled: true }, computed: { classes: function () { return [ 'btn', { ['btn-' this.size]: this.size !== '', ['btn-disabled']: this.disabled } ]; } } }) </script>

示例中的样式 btn 会始终应用，当数据 size 不为空时，会应用样式前缀 btn- ，后加 size 的值；当数据 disabled 为真时，会应用样式 btn-disabled，所以该示例最终渲染的结果为：

<button class="btn btn-large btn-disabled"></button>

使用计算属性给元素动态设置类名，在业务中经常用到，尤其是在写复用的组件时，所以在开发过程中，如果表达式较长或逻辑复杂，应该尽可能地优先使用计算属性。

三、在组件上使用

如果直接在组件上使用 class 或 :class ，样式规则会直接应用到这个组件的根元素上，例如声明一个简单的组件：

Vue.component('my-component', { template: '<p class="article">我是个文本</p>' });

然后在调用这个组件时，应用上面的对象语法或数组语法给组件绑定 class ，以对象语法为例：

<div id="app"> <my-component :class="{ 'active': isActive }"></my-component> </div> <script> var app = new Vue ({ el: "#app", data: { isActive: true } }) </script>

最终组件渲染后的结果为：

<p class="article active">我是个文本</p>

这种用法仅适用于自定义组件的最外层是一个根元素，否则会无效，当不满足这种条件或需要给具体的子元素设置类名时，应当使用组件的 props 来传递（这些用法同样适用于绑定内联样式 style 的内容）。

四、绑定内联样式

使用 v-bind:style （即 :style）可以给元素绑定内联样式，方法与 :class 类似，也有对象语法和数组语法，看起来很像直接在元素上写 CSS ：

<div id="app"> <div :style="{ 'color': color, 'fontSize': fontSize 'px'}">我是个文本</div> </div> <script> var app = new Vue ({ el: "#app", data: { color: 'red', fontSize: 14 } }) </script>

CSS 属性名称使用驼峰命名 （camelCase）或短横分割命名（kebab-case），渲染后的结果为：

<div style="color: red; font-size: 14px;">红色文本</div>

大多数情况下，直接写一长串的样式不便于阅读和维护，所以一般写在 data 或 computed 里，以 data 为例改写下面的示例：

<div id="app"> <div :style="styles">我是一个红色的文本</div> </div> <script> var app = new Vue ({ el: "#app", data: { styles: { color: 'red', fontSize: 14 'px' } } }) </script>

应用多个样式对象时，可以使用数组语法：

<div :style="[styleA, styleB]">文本</div>

在实际业务中，:style 的数组语法并不常用，因为往往可以写在一个对象里面；而较为常用的应当时计算属性。

另外，使用 :style 时，Vue.js 会自动给特殊的 CSS 属性名称增加前缀，比如 transform 。

在笔记本电脑屏幕上的概念

,