Aquí está mi código Vue:
<icon :color="itemDynamicColor" :data="icon" /> <span v-bind:style="dynamicStyle">SpanText</span>Quiero que el icono y el texto de intervalo mantengan el mismo color, como puede ver, utilizo la propiedad calculada para definir el color del icono y el color de intervalo. Sin embargo, creo que de esta manera es un poco estúpido.
Me pregunto si hay alguna manera mejor.
En realidad, el color de ambos cambiará cuando cambien algunos datos.
Puede manejar todo esto en CSS simple usando una propiedad personalizada para el color que desea y luego configurando el color de <icon> y <span> a eso.
El color de ambos cambiará cuando cambien algunos datos.
Para lograr esto, puede actualizar el objeto dynamicStyle tanto en <icon> como <span> según la condición según sus requisitos.
demostración :
new Vue({ el: '#app', data: { dynamicColor: { color: 'red' } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <!-- For icon you can apply same dynamicColor property dynamically --> <span :style="dynamicColor">SpanText</span> </div>