Vue3学习笔记（9.1）

Vue.js style（内联样式）

我们可以在v-bind:style直接设置样式，可以简写:style

    
    
    
    
    
    
   


    

      
        
基尼太美

    

    

    

 也可以直接绑定到一个样式对象

    
    
    
    
    
    
   


    

      
        
基尼太美

    

    

    

 v-bind：style可以使用数组将多个样式对象应用到一个元素上：
 

    
    
    
    
    
    
   


    

      
        
基尼太美

    

    

    

这样，基尼太美就加粗了。

 注意：当v-bind:style使用需要特定前缀的CSS属性时，如transform，Vue.js会自动侦测并添加相应的前缀。

多重值

可以为style绑定中的property提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

这样写只会渲染数组中最后一个被浏览器支持的值。如果浏览器支持不带浏览器前缀的flexbox，那么就只会渲染display:flex。

组件上使用class属性

当我们在带有单个根元素的自定义组件上使用class属性，这些class将被添加到该元素中。此元素上的现有class将不会被覆盖。

 对于带数据绑定class也同样适用：

当isActive为TRUE时，HTML将被渲染成为：

Hi

如果你的组件有多个根元素，你需要定义哪部分将接收这个类。可以使用$attrs组件属性执行此操作：