Kaedah yang digunakan untuk menetapkan gaya dalam vue ialah

Terdapat empat cara untuk menetapkan gaya dalam Vue.js: menggunakan gaya sebaris, gaya setempat (skop), prapemproses Sass/SCSS dan modul CSS. Gaya sebaris ditulis terus ke dalam templat hanya digunakan pada komponen semasa Sass/SCSS menyediakan modul CSS gaya yang lebih berkuasa menjana nama kelas yang unik untuk mengelakkan konflik.

Kaedah menetapkan gaya dalam Vue

Dalam Vue.js, terdapat banyak cara untuk menambah gaya pada komponen dan elemen.

1. Gaya sebaris

Gaya sebaris ditulis terus ke dalam templat komponen, iaitu kaedah tetapan gaya yang paling mudah.

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

2. Gaya tempatan (skop)

Gaya skop hanya terpakai pada komponen semasa dan elemen dalamannya, yang boleh menghalang pencemaran gaya.

<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 dan SCSS ialah prapemproses CSS yang boleh digunakan dalam Vue.js untuk menulis gaya yang lebih berkuasa.

<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. Modul CSS

Modul CSS menghalang konflik gaya dengan menjana nama kelas yang unik, selalunya digunakan dengan 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

Atas ialah kandungan terperinci Kaedah yang digunakan untuk menetapkan gaya dalam vue ialah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!