Vue.js实战第四章笔记

4.1了解v-bind指令
v-bind主要用法是动态更新HTML元素上的属性，当数据变化时，就会重新渲染。

4.2绑定class的几种方式
4.2.1对象语法
给v-bind设置一个对象，可以动态地切换class

data:{ isActive: true } 当:class的表达式过长或逻辑复杂时，还可以绑定计算属性

data:{ isActive: true, error:null }, computed:{ classes: function(){ return { active: this.isActive&&!this.error, 'text-fail':this.error&&this.error.type ==='fail' } } } 4.2.2数组语法

data:{ activeCls: 'active', errorCls:'error' }, 在数组语法中使用对象语法

data:{ isActive: true, errorCls:'error' }, 4.2.2在组件上使用 声明一个组件： Vue.component('my-component',{ template: '

一些文本

' }) 调用组件：

最后渲染结果：

一些文本

4.3绑定内联样式 v-bind:style

data:{ color: 'red', fontSize: 14 }, 渲染结果：

文本

data:{ styles:{ color: 'red', fontSize: 14+'px' } },