Vue3样式绑定

小编今天和大家分享关于Vue中的样式和class的绑定,
首先声明,这篇文章出现的class不是类声明的关键字,而是标签内部的属性,用于实现样式
在原生html中,我们给一个元素添加样式的时候,大概有这么两种方式




    
    
    
    Document


    
我是一个红色的小可爱

第二种方式就是在head标签之间,添加style标签,将样式统一写在style之间,然后在标签中定义对应的class




    
    
    
    Document
    


    
我同样是一个红色的小可爱

对于Vue来说,有以下四种方式定义样式和class
一、通过Vue提供的v-bind方式绑定字符串,就像这样


  
    
  
  
    
  

最后渲染出来的DOM长这样

Hello World

二、class绑定的还可以是个Object,这个Object比较特别,key为定义好的class,value为Boolean,为true的时候,添加该class,否则不添加该class


  
    
  
  
    
  

最后渲染出来的DOM长这样

Hello World

三、class绑定的还可以是个Array,当然Array中的元素也可以是个Object,只不过这个Object的规则和上面的一样


  
    
  
  
    
  

最后渲染出来的DOM长这样

Hello World

四、还可以通过绑定style的方式


  
    
  

当然最后就在页面中渲染出黄色的元素
上面介绍的都没涉及到组件,要是页面中有组件又会是什么样呢
对于组件中样式,有这么两种情况,一个是子组件中只有一个最外层元素包裹的时候,是可以沿着父组件传递下去的,也就是对应的class给子组件内部,或者直接给在父页面的子组件上效果是一样的


  
    
  
  
    
  

上面的代码,将class在父页面给子组件,效果和直接在子组件中添加class效果是一样的,渲染出来的DOM也是一样的

Hello World
single

但是当子组件不仅是一个最外层元素包裹的时候,是不能“向下传递”的,如果也想获取在组件中注册的class,可以这样实现


  
    
  
  
    
  

大家还可以扫描二维码,关注我的微信公众号,蜗牛全栈

你可能感兴趣的