Vue-da style atributy arkaly stilizasiýa

CSS stilleri gönüden-göni style atributy arkaly goşup bolýar. Bunun üçin atributa bir obýekt geçirilýär, onda islenilen CSS aýratynlyklary şu obýektiň düwmeleri bolmaly, we degişli CSS aýratynlyklarynyň bahalary - obýektiň şol düwmeleriň bahalary.

Mysal üçin, bir aýratyn abzasy gyzyl reňke boýaýaly we ona ýaşyl reňkli çäg goşaly:

<template>
	<p :style="{color: 'red', border: '1px solid green'}">
		text
	</p>
</template>

Indi onuň ýerine çägüň, onuň font-size-ni 30px edeliň. Şeýlelik bilen obýektde defisi bolan düwme bolup bilmeýändigi üçin, biz onuň ýanyna dyrnak goýmaly:

<template>
	<p :style="{color: 'red', 'font-size': '30px'}">
		text
	</p>
</template>

Şeýle hem font-size ýerine fontSize ýazylyp bilner - bu hem işler:

<template>
	<p :style="{color: 'red', fontSize: '30px'}">
		text
	</p>
</template>

Abzas berlen. Onuň tekstini ýaşyl reňke boýaň we onuň fonyny - sary ediň.

Abzas berlen. Onuň tekstini galyň we ýatyk ediň.