Pengikatan Kelas dan Gaya

Digunakan pada komponen

Ikat sebaris gaya
- Mengikat Kelas HTML Sintaks objek aktif kelas ini akan bergantung pada atribut data isActive kebenaran.
- ```
<div v-bind:class="{ active: isActive }"></div>
```
  dan data berikut:
```
<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
```
  Hasilnya dipaparkan sebagai:
```
data: {
  isActive: true,
  hasError: false
}
```
```
<div class="static active"></div>
```
```
<div v-bind:class="classObject"></div>
```
Hasil pemaparan adalah sama seperti di atas. Kami juga boleh mengikat sifat dikira objek yang dikembalikan di sini. Ini ialah corak biasa dan berkuasa:
```
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}
```
```
<div v-bind:class="classObject"></div>
```
- sintaks tatasusunan
- Kita boleh menghantar tatasusunan kepada v-bind:class, untuk menggunakan senarai kelas:
```
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}
```
```
<div v-bind:class="[activeClass, errorClass]"></div>
```
  dipaparkan sebagai:
```
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}
```
  Jika anda juga ingin menukar kelas dalam senarai berdasarkan syarat, anda boleh menggunakan ungkapan ternary:
- Menulis seperti ini akan sentiasa menambah
  errorClass, tetapi tambahkan activeClassisActive adalah benar^[1]
  kod>. Namun, menulis dengan cara ini agak menyusahkan apabila terdapat beberapa kelas bersyarat. Jadi sintaks objek juga boleh digunakan dalam sintaks tatasusunan:
```
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
```
- Digunakan pada komponen
  Bab ini mengandaikan bahawa anda sudah mempunyai pemahaman tertentu tentang komponen Vue. Sudah tentu, anda juga boleh melangkau di sini dan kembali kepadanya kemudian.
  Apabila menggunakan atribut class pada komponen tersuai, kelas ini akan ditambahkan pada elemen akar komponen. Kelas yang telah wujud pada elemen ini tidak akan ditimpa. class 属性时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。
  例如，如果你声明了这个组件：
```
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
```
  然后在使用它的时候添加一些 class：
```
Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})
```
  HTML 将被渲染为:
```
<my-component class="baz boo"></my-component>
```
  对于带数据绑定 class 也同样适用：
```
<p class="foo bar baz boo">Hi</p>
```
  当 isActive 为 truthy^[1] 时，HTML 将被渲染成为：
```
<my-component v-bind:class="{ active: isActive }"></my-component>
```
  绑定内联样式
  对象语法
  v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：
```
<p class="foo bar active">Hi</p>
```
```
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
```
  直接绑定到一个样式对象通常更好，这会让模板更清晰：
```
data: {
  activeColor: 'red',
  fontSize: 30
}
```
```
<div v-bind:style="styleObject"></div>
```
  同样的，对象语法常常结合返回对象的计算属性使用。
  
  数组语法
  v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：
```
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}
```
  自动添加前缀
  当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。
  
  多重值
  2.3.0+
  从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：
```
<div v-bind:style="[baseStyles, overridingStyles]"></div>
```
  这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。
  
  译者注
  [1] truthy 不是 trueSebagai contoh, jika anda mengisytiharkan komponen ini:
```
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
```
  dan kemudian menambah beberapa kelas apabila menggunakannya:
  rrreee
  HTML akan dipaparkan sebagai:
  rrreee
  Perkara yang sama berlaku untuk kelas dengan pengikatan data:
  rrreee Bila🎜 kod>isActive adalah benar^[1]🎜, HTML akan dipaparkan sebagai: 🎜rrreee🎜🎜🎜
  🎜Mengikat gaya sebaris🎜🎜
  Sintaks objek 🎜🎜🎜🎜v-bind:stylesintaks objek sangat intuitif - ia kelihatan seperti CSS, tetapi ia sebenarnya objek JavaScript . Nama sifat CSS boleh dinamakan dalam camelCase atau kebab-case (ingat untuk melampirkannya dalam petikan): 🎜rrreeerrreee🎜Selalunya lebih baik untuk mengikat terus ke objek gaya, yang menjadikan templat lebih jelas: 🎜rrreeerrreee🎜Begitu juga, sintaks objek adalah sering digunakan bersama-sama dengan sifat dikira yang mengembalikan objek. 🎜🎜🎜🎜
  🎜🎜Array Grammar🎜🎜🎜🎜v-bind:stylesintaks tatasusunan boleh menggunakan berbilang objek gaya pada elemen yang sama Di atas : 🎜rrreee🎜🎜🎜
  🎜🎜Tambah awalan secara automatik🎜🎜🎜🎜Apabila v-bind:style digunakan, anda perlu menambah Awalan enjin penyemak imbas 🎜 Sifat CSS, seperti transform, Vue.js akan secara automatik Mengesan dan menambah awalan yang sesuai. 🎜🎜🎜🎜
  🎜🎜Nilai berbilang🎜🎜🎜🎜🎜2.3.0+🎜🎜🎜Dari 2.3.0 dan seterusnya, anda boleh mengikat atribut tatasusunan yang mengandungi berbilang nilai, selalunya digunakan untuk menyediakan berbilang nilai awalan, contohnya: 🎜rrreee🎜Menulis seperti ini hanya akan menghasilkan nilai terakhir dalam tatasusunan yang disokong oleh penyemak imbas. Dalam contoh ini, jika penyemak imbas menyokong flexbox tanpa awalan penyemak imbas, maka hanya display: flex akan dipaparkan. 🎜🎜🎜🎜
  🎜Nota Penterjemah🎜🎜🎜[1] truthy tidak benar, lihat penjelasan 🎜MDN🎜 untuk mendapatkan butiran. 🎜🎜🎜🎜🎜 🎜

Pengikatan Kelas dan Gaya

绑定内联样式

🎜Mengikat gaya sebaris🎜🎜

Laman web PHP Cina