Vue3---Vue中的诸多花样样式写法-以及-相关规则和技巧

#完整原文地址见简书www.jianshu.com/p/cdbd2670e… #更多完整Vue笔记目录敬请见《前端 Web 笔记 汇总目录（Updating）》

#本文内容提要

• Class样式写法
  • 常规的样式使用写法
  • 使用v-bind的形式动态设定DOM组件样式
  • 使用v-bind + Object的形式组织样式 绑定DOM组件；
  • 使用v-bind + 数组的形式组织样式 绑定DOM组件
  • 数组形式中混合Object形式的；
• 子组件样式 默认跟随 父组件
  • 子组件自己配置样式，则不跟随根组件，按子组件自己的样式渲染
  • 拥有“两个以上最外层组件”的样式处理
    • 解决办法1，外层组件 各自配置样式；
    • 解决办法2，使用:class="$attrs.class"对外层组件进行配置， 使得统一跟随引用处样式配置；
• 行内样式写法
  • 常规写法
  • Vue式写法，使用v-bind配合data
  • Object形式描述样式，可读性更高

####Class样式写法 **常规的样式使用写法：** ``` Hello World! heheheheheheda .blue { color: blue; } .green { color: green; }

**效果：![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/83fd1e6897d248f1bcdc36854ba3fe90~tplv-k3u1fbpfcp-zoom-1.image)** 

<br>
**使用`v-bind`的形式动态设定DOM组件样式：**

Hello World! heheheheheheda .blue { color: blue; } .green { color: green; } ``` **改变`data字段`可以动态改变组件颜色：**
**使用`Object`的形式组织样式 绑定DOM组件：** ``` Hello World! heheheheheheda .blue { color: blue; } .green { color: green; } ``` 关键代码： ``` data() { return { colorObject: {blue:true, green:true} } }, ``` 效果如下：

如果将颜色键值设置成false，则网页DOM组件便不会展示：

<script>
    const app = Vue.createApp({
        data() {
            return {
                colorObject: {blue:true, green:false}
            }
        },
        template: `
        <div :class = "colorObject">luelueluelielielie</div>`
    });
    const vm = app.mount('#heheApp');
  </script>

效果：

**使用`数组`的形式组织样式 绑定DOM组件：** ``` Hello World! heheheheheheda .blue { color: blue; } .green { color: green; } .orange { color: orange; } .yellow { color: yellow; } ``` 效果：
**`数组`形式中混合`Object`形式的：** ``` ``` 效果：
#####子组件样式 默认跟随 父组件 例程： 添加子组件`testDom`到根组件，子组件样式没有配置，则默认跟随根组件： ``` Hello World! heheheheheheda .blue { color: blue; } .green { color: green; } .orange { color: orange; } ``` 运行效果：
**子组件自己配置样式，则不跟随根组件，按子组件自己的样式渲染：** ``` ``` 
####拥有“两个以上最外层组件”的样式处理 **不过当添加的子组件的`template`中，最外层有两个以上的组件的时候， 在引用子组件处（如下代码中的``）配置样式是没有作用， 子组件`template`下的组件 会沿用根组件的样式（如下代码中的`