ダイナミックなクラスとスタイル

この記事では、あなたのアプリケーションに動的な機能を追加することはあまり新しいものではなく、あまり知られていない方法を提供することを目的としています.
ユーザーのアクションやイベントに対応する動的UIコンポーネントを書くとき、これらのイベントに対してDOMへの変換を行う方法が必要です.DOMの変更は通常、我々がJavaScriptにある特定の反応データに基づいてスタイルとクラスを変えることによって達成されます.

While we can certainly do string concatenation, calculate a string and then bind a string to class or style... this method is error-prone and cumbersome at times to deal with. That's where Vue.js's clean suite of enhancements come into vue ( french for 'view' )

クイック要約データバインド

あなたがデータバインディングが何であるかについて熟知しないならば......それは本質的にあなたの要素の任意の属性をバインドするtemplate で使用可能なデータにscript タグ、データ、または計算されたプロパティをすることができます.
データのバインドはVueの最もエレガントな機能の一つです.ので、簡単な構文を使用して無効なデータバインドを提供するJSv-bind .

<div 
  v-bind:class="dynamicClass"
>Hello World!
</div>

データバインディング用の速記は: そして、それから、私は誰でもより多くを使うことを好むと思います.

<div 
  :class="dynamicClass"
>Hello World!
</div>

上記のクラスが一度初期化されていないと仮定して、ユーザ入力に基づいて変更されたクラスの同じ種類のままですcomputed プロパティwatch 改めるdynamicClass 変数.それで、物事はこのように見え始めます.

export default {
  data( ) {
    return {
      changingBoolean: false
    }
  },
  computed: {
    dynamicClass: ( ) => changingBoolean : 'text-center text-lg' ? 'text-justify text-xl'
  }
}

Looking at the code above we can see that for a simple switch in classes based on a variable we had to write so much code. So simply creating a dynamic class won't work.

クラスの配列構文

前のタスクを面倒にする配列構文を入力し、必要に応じて乾かしてください.

<article 
  :class="[changingBoolean : ? 'text-center' : 'text-justify']"
>
    Hello World!
</aside>

これは前の方法よりもはるかにきれいです≧◠‿◠≦✌. しかし、複数の値を追加することもできます.フレックスと幅が常に存在する間、テキストアラインメントクラスを切り替えることができます.

<article 
  :class="[changingBoolean : ? 'text-center' : 'text-justify', 'flex w-2']"
>
    Hello World!
</aside>

クラスのオブジェクト構文

場合によっては、1つのクラスのon/offを追加したい場合にはtrue 何もないときfalse . 三項演算子を使うと以下のようになります

:class = [changingBoolean : ? 'text-center' : ' ', 'flex w-2']

結局、すべてはJavaScriptのオブジェクトであるので、オブジェクト構文を入力してください.

:class = [ { 'text-center' : changingBoolean }, 'flex w-2']

オブジェクトを配列に保持する代わりに直接オブジェクトにバインドすることもできます.また、配列のように複数のトグルクラスをサポートします.

<article
  class="absolute"
  :class="{ active: isActive, 'text-xl': largeText }"
></article>

active is a simple string variable for class whereas isActive and largeText are boolean variables. Also if you noticed class and :class can simultaneously exist on a single element ツ

オブジェクトを渡す

また、反応することができますarray/object 当社に保管data or computed クラスへ.これは、複数のチェックとトグルを行う必要があるときに、より強力なパターンをすることができますHTMLに収まるときに良いと読みやすく見えません.

<nav :class="classObject"></nav>

子クラスの変更

私たちには素晴らしくて光沢のあるアイコン要素があると仮定します.しかし、私たちがそのクラスでその色を変えなければならない時が来ました.

<my-icon
  :class="text-blue-600"
/>

現在:class コンポーネントの親のクラスの末尾に追加されます.我々は明らかにも簡単に提供することができますclass も.

スタイルの配列とオブジェクト構文

クラスとスタイルの配列とオブジェクト構文は、非常にマイナーな変更を除いて、全く同一に見えます.これは、変数の信頼性についてではなく、これは右のCSSプロパティに割り当てることです.

<nav 
:style="{ marginTop: marginTop + 'px', backgroundColor: infoColor }"
>Doge Coin
</nav>

上の例では、color プロパティ動的な値と同様の操作fontSize .

我々は、引用符でそれらをラップするだけで確実にケバブのケースとしてプロパティを書くことができます

オブジェクトに直接渡すことは、より強力でありえますstyle これは、読みやすくてきれいな方法です.

スタイルの配列構文のための目的は、私たちが複数のオブジェクト(Duhhhが何をするかについて、Duhhhです)に渡すのを許容するのを減らします.

<nav 
:style="[marginObject, backgroundObject]"
>Doge Coin
</nav>

ボーナス楽しみ

CSSプロパティには、ベンダプレフィックスを使用する必要があります.Vueは暗黙のうちに私たちのためにそれらを適用しますが、明示的にしたいならば、オブジェクト構文を通して単一のプロパティのために複数の値を通過して、値の配列を提供することができます.Vueはブラウザがサポートする配列に最後の値を与えるだけです.

<ul :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></ul>

読んでくれてありがとう!配列とオブジェクト構文についてのあなたの考えを共有してください、あなたはストリングの上で彼らを好むでしょうか?
私にあなたのフィードバックを共有したり、任意のクエリのために手を差し伸べる.私は、助けるより幸せです!