Vue框架(绑定class样式)

目录

 字符串写法

 对象写法

 对象写在内联样式

 对象写在data中

 数组写法

 内联写法

数组里加三元表达式

写在data中

总结


官方文档:Class 与 Style 绑定 — Vue.js (vuejs.org)

 字符串写法

字符串写法把data中的实例的值当作字符串填入class中来改变样式

这种方式是最灵活的

使用场景:样式的类型不确定

 字符串绑定类样式:

你好

字符串使用的是vue实例data中的已有属性

实例




    
    
    
    vue2
    



    
你好,vue
你好,vue
你好,vue

浏览器输出结果

Vue框架(绑定class样式)_第1张图片

 对象写法

使用场景:样式个数、类名确定,通过Boolean动态展示与否

 对象写在内联样式

对象方式绑定内联样式:

你好

实例




    
    
    
    vue2
    



    
你好,对象

浏览器输出结果

Vue框架(绑定class样式)_第2张图片

 通过控制台修改后把颜色样式修改为真

Vue框架(绑定class样式)_第3张图片

 对象写在data中

对象写在data中绑定:

你好

实例

data中的对象k值要和css中的类样式名一致,value值可以随便写但不能为空最好和类样式名一致




    
    
    
    vue2
    



    
对象2-你好

浏览器输出结果

Vue框架(绑定class样式)_第4张图片

 数组写法

使用场景:需要绑定的样式个数不确定,类名也不确定

 内联写法

数组中一个元素对应一个类样式

实例




    
    
    
    vue2
    



    
数组1-你好

浏览器输出结果

Vue框架(绑定class样式)_第5张图片

数组里加三元表达式

实例

 大写能不能绑定上样式,要看isActive是真还是假

数组2-你好

写在data中

实例




    
    
    
    vue2
    



    
数组2-你好

浏览器输出结果

Vue框架(绑定class样式)_第6张图片

总结

虽然有很多中绑定类样式的方法,但是每种类型各有千秋,要根据使用场景来去使用

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