Le style de vue en ligne est également divisé en syntaxe d'objet et syntaxe de tableau.
Quel que soit le type de classe de liaison ou de liaison en ligne, leurs styles sont divisés en objets ou en tableaux.
La barrière des tableaux ou des objets utilise les données en vue pour effectuer une transition: c'est-à-dire pour atteindre l'objectif des vues pilotées par les données
Remarque: v-bind: Bien que la syntaxe de style soit très similaire à la syntaxe CSS, elle existe en fait en tant qu'objet javascript. Lors de la dénomination, utilisez la nomenclature de cas de chameau. Si vous utilisez la nomenclature de tiret, vous devez mettre le nom entre guillemets.
1. Syntaxe des objets
//一种：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
//第二种也是可以生效的：
<div
class="button_container"
:style="{color:'red',fontSize:'25px'}"
>
凡夫俗子
</div>
//第三种直接绑定一个样式对象通常会更好，会让模板更加的清晰
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
//第四种就是搭配计算属性用了
<div v-bind:style="styleObject"></div>
data: {
activeColor: 'red',
fontSize: 30
}
computed: {
styleObject: function() {
return {
color: this.activeColor,
fontSize: this.fontSize
}
}
}
2. Syntaxe du tableau
La syntaxe de tableau peut appliquer plusieurs objets de style au même élément
<div v-bind:style="[baseStyles, overridingStyles]"></div>