Vue基础学习笔记 --- Class和Style 绑定v-bind

通过v-bind来绑定class和style来指定样式是很常见的,他们都是元素的属性,表达式结果的类型可以是数组、对象、字符串

格式:

  • class:

v-bind:class=‘表达式’   或者  :class=‘表达式’

其中表达式可以为:

  1. 字符串  :class='activeClass'
  2. 对象      :class='{active:isActive,error:hasError}'
  3. 数组      :class='["active","error"]'  数组里面的元素要加双引号,要不然获取的是data中的值  ;数组中也可以包含对象,当对象的属性值发生改变的时候,也会更新class列表
  • style:

:style的表达式一般都为对象

:style="{color:activeColor,fontSize:fontSize+'px'}"    activeColor和fontSize都是data中的属性

(当在实际的应用时,如果class后面跟的是字符串,那么不用v-bind动态绑定,因为string值是固定不变的。)

//写在指令中的值会被视作表达式,如javascript表达式,因此v-bind:class支持三目运算
 
三目运算

你可能感兴趣的:(vue,vue.js,学习,前端)