VUE形式でデータ内の変数を使用する方法を詳しく解説

最近のプロジェクトでパブリック コンポーネントを再利用する場合、CSS のスタイルの値はさまざまなシナリオに合わせて常に変更する必要があります。また、グローバルなパブリック コンポーネント スタイルがすでに存在します

Vue の伝統的なクラスとスタイルの動的バインド方法を使用してスタイルを変更する場合 (記事の最後に記載)、多くの追加の変数とモジュール クラスを記述する必要があります。その後、私のスタイルの値を取得できれば親コンポーネントからサブコンポーネントに渡されると、サブコンポーネントは渡された値に基づいて、対応するスタイルの値をレンダリングします。実際、これはデータ内の変数とスタイル内のプロパティを使用することを意味します。これを行うにはどうすればよいですか?

関連する学習の推奨事項: JavaScript ビデオ チュートリアル

実際には非常に簡単で、必要なステップは 3 つだけです。見てください:

1. HTML 構造

<Upload

   ref="upload"

   :show-upload-list="false"

   :before-upload="handleBeforeUpload"

   :disabled="disabled"

   :max-size="maxSize"

   action
>

2. スコープ

<style lang="less" scoped>
.info-img-wrap {

 --textAlignPosition: center;

 /deep/ .ivu-upload {

  text-align: var(--textAlignPosition);

 }

}
<style/>

3 の範囲内で「CSS 変数」を設定します。setProperty を渡します。 () in JS このメソッドは、「--textAlignPosition」の値を変更し、それによって、対応する子要素の (text-align) テキスト配置を間接的に変更します。

mounted() {

   this.$nextTick(function () {

    this.$refs.upload.$el.style.setProperty(

     '--textAlignPosition',

     this.textAlign

    );

   });

}

これで、ほぼ完了です。

Vue でスタイルを変更するには他にも 2 つの方法があることを確認しましょう、1 つはクラスを動的に変更する方法、2 はスタイルを動的に変更する方法です。

#1. Vue では、オブジェクト構文と配列構文を使用してクラスを変更できます

オブジェクト構文

html

<p v-bind:class="{ &#39;active&#39;: isActive, &#39;text-danger&#39;: hasError }"></p>

js

data: {

 isActive: false,

 hasError: true

}

配列構文

html

<p v-bind:class="\[isActive ? activeClass : &#39;&#39;, errorClass\]"></p>

js

data: {

 isActive: false,

 hasError: true,

 activeClass: 'active',

 errorClass: 'text-danger'
}

isActive と hasError の値を動的に変更するだけで、さまざまなクラスをバインドし、p# のバインドを削除できます。

##2、Vue では、オブジェクト構文と配列構文を使用してスタイルを変更できます

オブジェクト構文

html

<p v-bind:style="{ color: activeColor, fontSize: fontSize + &#39;px&#39; }"></p>

js

data: {

 activeColor: 'red',

 fontSize: 30

}

配列構文

html

<p v-bind:style="\[styleColor, styleSize\]"></p>

js

data: {

 styleColor: {

   color: 'red'

  },

 styleSize:{

   fontSize:'23px'

 }

}

データ内の変数 styleColor と styleSize を変更する限り、動的に変更できます。 Pのスタイル。

関連する学習に関する推奨事項:

プログラミング ビデオ

以上がVUE形式でデータ内の変数を使用する方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。