私が使用するプラグインは動的HTMLを作成し、動的なbackground-color
を追加したいのですが、これは小道具を介して渡された16進数を使用しています。動的htmlのvuejs2動的CSS
これは
<template>
<div class="pagination" slot="pagination"></div>
</template>
この
<div class="pagination" slot="pagination">
<span class="swiper-pagination-bullet"></span>
<span class="swiper-pagination-bullet"></span>
</div>
のダイナミックHTMLコンポーネントは、私が明らかにテンプレートの色を見ることができます小道具
props: ['primaryBgColor']
を受けて生成し、私のコンポーネントでhtmlです書く場合は
<template>
<div>
{{ this.primaryBgColor }}
</div>
</template>
私は
<style>
.swiper-pagination-bullet {
background-color: {{ this.primaryBgColor }}
}
</style>
のようなコンポーネント内のスタイルを書くときしかし、WebPACKのは、私はCSSの構文エラーを持っているというエラーが返されます。何か案は? primaryBgColorはもっとオプションについて
{'background':"#cccc"}
のようなオブジェクトが含まれている必要があり
<template>
<div :style="this.primaryBgColor">
{{ this.primaryBgColor }}
</div>
</template>
テンプレートで
JSに基づいて動的に生成するCSSクラスをサポートするフレームワークはありませんでした。これは良い練習のように聞こえません。このようなフレームワークのコンテキストで完全に有効な私の意見では、インラインスタイルを適用するだけです。特に、このような動的な色付けの場合は特にです。 –
私はインラインスタイルを追加しますが、プラグインによって注入されるため、HTMLはテンプレートファイルに存在しません。 – thedanotto
"コンポーネント内にスタイルを書くのが大好きですが、私はそれを動作させることができませんでした"。それについては何ができませんか? '{{this.primaryBgColor}}'と書いて色を出力できるのであれば、 'style'タグの中のクラス名でそれを折り返すのはなぜですか? –