La méthode utilisée pour définir les styles dans vue est

Il existe quatre façons de définir des styles dans Vue.js : en utilisant des styles en ligne, des styles locaux (portés), des préprocesseurs Sass/SCSS et des modules CSS. Les styles en ligne sont écrits directement dans les modèles ; les styles locaux s'appliquent uniquement au composant actuel ; Sass/SCSS fournit des capacités d'écriture de style plus puissantes ; les modules CSS génèrent des noms de classe uniques pour éviter les conflits.

Méthodes de définition des styles dans Vue

Dans Vue.js, il existe de nombreuses façons d'ajouter des styles aux composants et aux éléments.

1. Style en ligne

Le style en ligne est écrit directement dans le modèle de composant, qui est la méthode de définition de style la plus simple.

<code class="html"><template>
  <div style="color: red; font-size: 20px;">Hello World</div>
</template></code>

2. Style local (porté)

Le style étendu s'applique uniquement au composant actuel et à ses éléments internes, ce qui peut empêcher la pollution de style.

<code class="html"><template>
  <style scoped>
    .my-class {
      color: blue;
      font-weight: bold;
    }
  </style>
  <div class="my-class">Hello World</div>
</template></code>

3. Sass/SCSS

Sass et SCSS sont des préprocesseurs CSS qui peuvent être utilisés dans Vue.js pour écrire des styles plus puissants.

<code class="scss">// main.scss
.my-component {
  color: #f00;
  font-size: 1.2rem;
}</code>

<code class="html"><template>
  <style lang="scss">
    @import "./main.scss";
  </style>
  <div class="my-component">Hello World</div>
</template></code>

4. Modules CSS

Les modules CSS évitent les conflits de style en générant des noms de classe uniques, souvent utilisés avec webpack.

<code class="javascript">// App.vue
import styles from './App.module.css';

export default {
  render() {
    return (
      <div className={styles.myClass}>Hello World</div>
    );
  }
}</code>

rrree

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!