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ň.