码迷,mamicode.com
首页 > 其他好文 > 详细

Vue——如何在Vue中使用样式

时间:2019-10-19 16:25:01      阅读:106      评论:0      收藏:0      [点我收藏+]

标签:font   绑定   技术   com   bind   表达式   如何   不用   引用   

使用class样式

1.数组

第一种使用方式,直接传递一个数组,注意:这里的class需要使用 v-bind做数据绑定

技术图片

 

2.数组中使用三元表达式

 

false

技术图片

 

 

 

true

 

 技术图片

 

3.数组中嵌套对象

false

技术图片

 

true

 技术图片

4.直接使用对象(不用数组包裹)

false

技术图片

 

 

true

技术图片

 

 

既然是一个对象,那我们也可以直接在data身上写进行保存

技术图片

 

 

内联样式

 

1.直接在元素上通过v-bind:style的形式,书写样式对象

技术图片

 

 

2.将样式对象,定义到 data 中, 并直接引用到v-bind:style中

  2.1在data上定义的样式

技术图片

 

 

  2.2在元素中,通过属性绑定的形式,将样式对象应用到元素中

技术图片

 

 

3.在v-bind:style中通过数组,引用多个data上样式对象

  3.1在data上定义的样式

 技术图片

 

 

  3.2在元素中,通过属性绑定的形式,将样式对象应用到元素中

技术图片

Vue——如何在Vue中使用样式

标签:font   绑定   技术   com   bind   表达式   如何   不用   引用   

原文地址:https://www.cnblogs.com/yangpeixian/p/11704266.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!