vue笔记----class和style绑定

数据绑定是一个常见需求是操作元素的class列表和他的内敛样式。因为他们都是属性， 我们可以用v-bind处理他们：只需要计算处表达式最终的字符串。不过，字符串拼接麻烦又易错。 因此在v-bind用于class和style时，Vue.js专门增强了它，表达式的结果类型除了字符串 之外。还可以是对象或数组 绑定THML Class 对象语法 我们可以传给v-bind：class一个对象，以动态地切换class <div v-bind:class="{active:isActive}"></div> 上面的语法表示class active的更新将取决于数据属性isActive是否为真值。 也可以在对象中传入更多属性用来动态切换多个class。此外，v-bind：class指令可以 与普通的class出行共存如下 <div class="static" v-bind:class="{active:isActive,"text-danger":hasError}> </div> 如下data: data:{ isActive:true, hasError:false } 渲染为： <div class="static active"></div> 当isActive或者hasError变化时，class列表将相应地更新。例如，如果hasError的值为 true,class列表将变为‘static active text-danger’。 也可以直接绑定数据里的一个对象： <div v-bind:class="classObject"></div> data:{ classObject:{ active:true, 'text-denger':false } } 渲染结果和上面一样。恶魔也可以在这里绑定返回对象的计算属性。这个是一个常用 且强大的模式： <div v-bind:clas="classObject"></div> data:{ isActive:true, error：null }, computed:{   classObject:function(){   return{   active:this.isActive&&!this.error,   'text-danger':this.error&&this.error.type==='fatal',   }   } } 数组语法:我们把一个数组传给v-bind：class，以应用一个class列表： <div v-bind:class="[active,errorClass]"> data:{   activeClass:'active',   errorClass:'text-danger' } 渲染为： <div class="sctive text-danger"></div> 如果想根据条件切换列表中的class,可以用三元表达式 <div v-bind:class="[isActive?activeClass:'',erorClass]"> 此例是中添加errorClass,但是只有在isActive是true时添加activeClass。 不过，当有多个田间class时这样写有些繁琐。可以在数组与法中使用对象语法： <div v-bind:class='[{active:isActive},errorClass]'> 用在组件上 当你在一个定制的组件上用到class属性的时候，这些将被添加到根元素上面 这个元素上已经存在的类不会被覆盖。 Vue.component('my-component',{ template:'<p class="foo bar"></p>' }) 然后在使用它的时候添加一些class： <my-component class="boz boo"></my-component> HTML最终将渲染为： <p class="foo bar baz boo">Hi</p> 绑定内联样式 对象语法 v-bind:style的对象语法十分直观---看着十分想css,其实它是一个javaScript 对象。css属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）: <div v-bind:style="{color:activeColor,footSize:fontSize+'px'}"></div> data:{ activeColor:'red', fontSize:30 } 直接绑定到一个样式对象通常更好，让模板更清晰： <div v-bind:style="styleObject"></div> data:{ styleObject:{ color:'red', fontSize:13px } } 同样的，对象语法常常结合返回对象的计算属性使用 数组语法 v-bins：style的语法可以将多个样式对象应用到一个元素上： <div v-bind:style="[baseStyles,overridingStyles]"> 自动添加前缀 当v-bins：style使用需要特定前缀的CSS属性时，如transform，Vue.js会 自动侦测并添加相应的前缀。