Bagaimana untuk menambah gaya pada elemen dalam vue

Tambah kaedah: 1. Gunakan pernyataan ":class="['class name']" untuk menambah; 2. Gunakan ":class="['class name 1','class name 2',{ Nama atribut (nama kelas):'Nilai atribut (benar atau salah)}]"" pernyataan 3. Gunakan pernyataan ":class="{Nama atribut (nama kelas):true}"; 4. Gunakan ":style=" Penyataan "{ 'Style name':'Style value'}"; 5. Gunakan pernyataan ":style="style"" untuk menambah; 6. Gunakan pernyataan ":style="[data]"".

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

Tambah gaya dalam vue

1. Gunakan gaya kelas:

Nama kelas mesti disertakan dalam tanda petikan;

1 -ekspresi

<h1 :class = "[&#39;类名1&#39;,&#39;类名2&#39;]">这种方法  需要用  v-bind: => :  绑定</h1>

3 Objek bersarang dalam tatasusunan

<h1 :class = "[&#39;类名1&#39;,&#39;类名2&#39;,表达式?&#39;类名3&#39;:&#39;&#39;]">这种方法  需要用  v-bind: => :  绑定</h1>

4 🎜>

<h1 :class = "[&#39;类名1&#39;,&#39;类名2&#39;,{属性名(类名):&#39;属性值(true或false)}]">这种方法  需要用  v-bind: => :  绑定</h1>

2. Gunakan gaya sebaris; 2. Takrifkan objek gaya ke dalam data, dan rujuknya dalam :style

<h1 :class = "{属性名(类名1):true,属性名(类名2):true}">这种方法  需要用  v-bind: => :  绑定</h1>

3. Hantarkan dalam :style Array, rujuk objek gaya pada berbilang data;

Contoh kod:

<h1 :style = "{&#39;样式名&#39;:&#39;样式值&#39;}">这种方法  需要用  v-bind: => :  绑定</h1>

(Belajar perkongsian video: tutorial Pengenalan vuejs ,

Video pengaturcaraan asas

<h1 :style = "vue里的样式">这种方法  需要用  v-bind: => :  绑定</h1>

)

Atas ialah kandungan terperinci Bagaimana untuk menambah gaya pada elemen dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!