Vue.js中的绑定样式实现

绑定class样式

1、字符串写法

Vue.js中的绑定样式实现_第1张图片




    
    Vue初识
    
    


{{name}}

2、数组写法

Vue.js中的绑定样式实现_第2张图片




    ......
    


......
{{name}}

3、对象写法



{{name}}

style 绑定样式


{{name}}
{{name}}

或者使用 style 对象写法:

{{name}}

或者 style 数组写法:

{{name}}

绑定样式

1、class样式

  • 写法:class="xxx" xxx 可以是字符串、对象、数组
  • 字符串写法适用于:类名不确定,要动态获取
  • 对象写法适用于:要绑定多个样式,个数不确定,名字也不确定
  • 数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用

2、 style样式 :style="{fontsize: xxx}"其中xxx是动态值

:style="[a,b]"其中a、b是样式对象

scoped

作用:让样式在局部生效,防止冲突 写法::