vue添加style

在Vue中，我们可以通过以下几种方式添加样式:

1. 在单文件组件(.vue)中的style标签中添加样式:

   <style>
   .example {
      color: red;
   }
   </style>

这样的样式只会在当前的组件中生效，不会影响其他组件的样式。

2. 在style标签中使用scoped属性可以使样式只在当前的组件中生效，样式私有化:

   <style scoped>
   .example {
      color: red;
   }
   </style>

使用scoped属性后，样式只会应用于当前组件的元素，不会影响其他组件的样式。

3. 在单文件组件(.vue)中使用import语句引入样式文件:

   <style>
   @import "../assets/common/common.css";
   </style>

这样可以引入外部的样式文件，并在当前组件中使用。

4. 使用计算属性返回一个样式对象:

   <template>
   <div>
      <p :style="myStyle">happy new year</p>
   </div>
   </template>

   <script>
   export default {
      computed: {
         myStyle() {
            return {
               color: 'green',
               backgroundColor: 'skyblue'
            }
         }
      }
   }
   </script>

在计算属性中返回一个包含样式属性的对象，然后通过v-bind绑定到元素上，实现动态样式。