vue.js 组件css_使用CSS样式化Vue.js组件

vue.js 组件css

Note: this tutorial uses Vue.js Single File Components

注意：本教程使用Vue.js单个文件组件

The simplest option to add CSS to a Vue.js component is to use the style tag, just like in HTML:

将CSS添加到Vue.js组件的最简单选择是使用style标签，就像在HTML中一样：

<template>
  <p style="text-decoration: underline">Hi!</p>
</template>

<script>
export default {
  data() {
    return {
      decoration: 'underline'
    }
  }
}
</script>

This is as much static as you can get. What if you want underline to be defined in the component data? Here’s how you can do it:

这是尽可能多的静态方法。 如果要在组件数据中定义underline怎么办？ 方法如下：

<template>
  <p :style="{'text-decoration': decoration}">Hi!</p>
</template>

<script>
export default {
  data() {
    return {
      decoration: 'underline'
    }
  }
}
</script>

:style is a shorthand for v-bind:style. I’ll use this shorthand throughout this tutorial.

:style是v-bind:style的简写。 在本教程中，我将使用此速记。

Notice how we had to wrap text-decoration in quotes. This is because of the dash, which is not part of a valid JavaScript identifier.

注意我们如何将text-decoration用引号引起来。 这是因为破折号不是有效JavaScript标识符的一部分。

You can avoid the quote by using a special camelCase syntax that Vue.js enables, and rewriting it to textDecoration:

您可以通过使用Vue.js启用的特殊camelCase语法并将其重写为textDecoration来避免引用：

<template>
  <p :style="{textDecoration: decoration}">Hi!</p>
</template>

Instead of binding an object to style, you can reference a computed property:

除了将对象绑定到style ，您还可以引用计算属性：

<template>
  <p :style="styling">Hi!</p>
</template>

<script>
export default {
  data() {
    return {
      textDecoration: 'underline',
      textWeight: 'bold'
    }
  },
  computed: {
    styling: function() {
      return {
        textDecoration: this.textDecoration,
        textWeight: this.textWeight
      }
    }
  }
}
</script>

Vue components generate plain HTML, so you can choose to add a class to each element, and add a corresponding CSS selector with properties that style it:

Vue组件生成纯HTML，因此您可以选择向每个元素添加一个类，并添加具有样式属性的相应CSS选择器：

<template>
  <p class="underline">Hi!</p>
</template>

<style>
.underline { text-decoration: underline; }
</style>

You can use SCSS like this:

您可以像这样使用SCSS：

<template>
  <p class="underline">Hi!</p>
</template>

<style lang="scss">
body {
  .underline { text-decoration: underline; }
}
</style>

You can hardcode the class like in the above example, or you can bind the class to a component property, to make it dynamic, and only apply to that class if the data property is true:

您可以像上面的示例中那样对类进行硬编码，也可以将类绑定到组件属性以使其具有动态性，并且仅在data属性为true时才应用于该类：

<template>
  <p :class="{underline: isUnderlined}">Hi!</p>
</template>

<script>
export default {
  data() {
    return {
      isUnderlined: true
    }
  }
}
</script>

<style>
.underline { text-decoration: underline; }
</style>

Instead of binding an object to class, like we did with <p :class="{text: isText}">Hi!</p>, you can directly bind a string, and that will reference a data property:

无需像在<p :class="{text: isText}">Hi!</p>那样将对象绑定到类，您可以直接绑定一个字符串，该字符串将引用一个data属性：

<template>
  <p :class="paragraphClass">Hi!</p>
</template>

<script>
export default {
  data() {
    return {
      paragraphClass: 'underline'
    }
  }
}
</script>

<style>
.underline { text-decoration: underline; }
</style>

You can assign multiple classes either adding two classes to paragraphClass in this case or by using an array:

您可以分配多个类，在这种情况下，可以在paragraphClass类中添加两个类，也可以使用数组：

<template>
  <p :class="[decoration, weight]">Hi!</p>
</template>

<script>
export default {
  data() {
    return {
      decoration: 'underline',
      weight: 'weight',
    }
  }
}
</script>

<style>
.underline { text-decoration: underline; }
.weight { font-weight: bold; }
</style>

The same can be done using an object inlined in the class binding:

使用类绑定中内联的对象可以完成相同的操作：

<template>
  <p :class="{underline: isUnderlined, weight: isBold}">Hi!</p>
</template>

<script>
export default {
  data() {
    return {
      isUnderlined: true,
      isBold: true
    }
  }
}
</script>

<style>
.underline { text-decoration: underline; }
.weight { font-weight: bold; }
</style>

And you can combine the two statements:

您可以结合以下两个语句：

<template>
  <p :class="[decoration, {weight: isBold}]">Hi!</p>
</template>

<script>
export default {
  data() {
    return {
      decoration: 'underline',
      isBold: true
    }
  }
}
</script>

<style>
.underline { text-decoration: underline; }
.weight { font-weight: bold; }
</style>

You can also use a computed property that returns an object, which works best when you have many CSS classes to add to the same element:

您还可以使用返回对象的计算属性，当您将多个CSS类添加到同一元素时，该属性最有效：

<template>
  <p :class="paragraphClasses">Hi!</p>
</template>

<script>
export default {
  data() {
    return {
      isUnderlined: true,
      isBold: true
    }
  },
  computed: {
    paragraphClasses: function() {
      return {
        underlined: this.isUnderlined,
        bold: this.isBold
      }
    }
  }
}
</script>

<style>
.underlined { text-decoration: underline; }
.bold { font-weight: bold; }
</style>

Notice that in the computed property you need to reference the component data using this.[propertyName], while in the template data properties are conveniently put as first-level properties.

请注意，在计算属性中，您需要使用this.[propertyName]引用组件数据this.[propertyName]而在模板数据中，属性方便地放置为第一级属性。

Any CSS that’s not hardcoded like in the first example is going to be processed by Vue, and Vue does the nice job of automatically prefixing the CSS for us, so we can write clean CSS while still targeting older browsers (which still means browsers that Vue supports, so IE9+)

Vue将处理所有未像第一个示例中那样进行硬编码CSS，Vue会为我们自动为CSS加上前缀，因此我们可以编写干净CSS，同时仍以较旧的浏览器为目标(这仍然意味着Vue支持，因此IE9 +)

翻译自: https://flaviocopes.com/vue-css/

vue.js 组件css