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会
自动侦测并添加相应的前缀。