黑马学习记录--在Vue中使用样式

在Vue中使用样式

使用class样式

1. 数组

这是一个邪恶的H1

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

这是一个邪恶的H1

3. 数组中嵌套对象

这是一个邪恶的H1

4. 直接使用对象

这是一个邪恶的H1

完整代码：

  
  
  
  
  
  



  

    

    
    

    
    

    
    

    
    
这是一个很大很大的H1，大到你无法想象！！！


  

  

使用内联样式

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

这是一个善良的H1

2. 将样式对象，定义到 data 中，并直接引用到 :style 中

• 在data上定义样式：

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}

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

这是一个善良的H1

3. 在 :style 中通过数组，引用多个 data 上的样式对象

• 在data上定义样式：

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
        h1StyleObj2: { fontStyle: 'italic' }
}

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

这是一个善良的H1

完整代码：

  
  
  
  
  



  

    
    

    
这是一个h1