Day 13 Class与v-bind

v-bind
v-bind常与class和style的绑定,可以用於绑定一个或是多个属性(class、style),会以{}或是[]出现

当我将滑鼠放上text上,就会触发title属性

小提示:
v-bind除了完整的写出 v-bind:属性名称,也可以直接简写成 :属性名称

这两种写法在浏览器渲染之後的结果是一样的

常用修饰符
v-bind常用的修饰符有以下两个

• .prop : 将绑定的属性设定为DOM property,而不是attribute
  Attribute HTML的特性 为字串
  Property DOM的属性 可为任何值
• .camel : 将有kebab-case的属性名称转为camelCase
• .attr : 将绑定属性设定为DOM attribute

绑定多个class
原本在data内写出阵列Class名称,但似乎有点杂乱


因此可以改为下列,将多组的class放在data内的allClass里面

参考资料: https://book.vue.tw/CH1/1-4-directive.html
https://www.youtube.com/watch?v=n8FmbLT_FGM