类与样式绑定

类与样式绑定

• 先在css里面写好style，然后往代码里绑定就行
• 如果想要控制css的显隐，要在data里面设置一个布朗类型的变量，用v-if或v-show控制，两个标签使用同一个data变量就可以将两个标签关联起来

  类的对象写法

  • 先用v-bind绑定然后才可以使用对象写法
  • 对象写法： :class="{类名1：是否使用这个类名，类名2：是否使用这个类名}"

  <div :class="{a:flag,b:flag}">class对象写法</div>
  

  类的数组写法

  • （和对象写法很类似只是换成数组而已）

  <div :class="['a','b']">class数组写法</div>
  

  • （但是数组写法单独用没办法控制类名的显隐，所以我们可以使用数组加对象的写法来控制）

  类的数组与对象组合在一起的写法

  <div :class="[{a:flag},{b:flag},"c","d"]">class数组配合对象写法</div>
  

  (运用两个结合在一起的写法可以随心所欲的控制具体哪个类名是必须存在的哪个是想要控制的)

  三目运算符写法

  <div :class="flag?'a b':''">三目运算符</div>
  

  样式的对象写法 （与类的写法非常类似）

  • 先用v-bing绑定然后才可以使用对象和数组写法
  • 对象写法： :class="{类名1：是否使用这个类名，类名2：是否使用这个类名}"

  <div :style="{color:color,fontSize:fontSize}">style的对象写法</div>
  

  样式的数组写法

  <div :style="[{color:color},{fontSize:fontSize}]">style的数组写法</div>
  

  注意 要特别记着在css和HTML中是不支持大小写区分的如果需要在css和HTML里显示例如font-size这种带“-”的属性名时，用驼峰命名对照着写，HTML和css会自动将大写字母的属性名前加-并且变成小写