vueでクラスを動的にバインドするにはどうすればよいですか?手法の紹介

Vue.js の中核は、通常の HTML テンプレートの特別な構文を使用して DOM を基礎となるデータに「バインド」できるリアクティブ データ バインディング システムです。

バインドされた DOM はデータと同期され、データが変更されるたびに、対応する DOM ビューも更新されます。この機能に基づいて、vue.js を介してクラスを動的にバインドすることが非常に簡単になります。

1. データ バインディング

vue 命令は v- 接頭辞でマークされ、データ バインディング命令 v-bind: 属性名、略称は次のとおりです。属性名、簡単なデータ バインディングの例は次のとおりです:

<a v-bind:href=" 
简写：
<a :href="http://www.cnblogs.com/">博客园首页</a>

2. 動的バインディング クラス

vue のデフォルトの区切り文字は {{ }} の場合、区切り文字内の文字列はデータ変数とみなされます。class="{{ className }}" を通じてクラスを設定できますが、vue は v-bind:class を使用したこの方法を推奨しません。メソッドが混在しているため、いずれか 1 つしか選択できません。

v-bind:class class属性で変数をバインドするメソッドとは共存できませんが、ネイティブクラス機能とは共存できます。ネイティブクラスとvの出現は許可されています。同時に DOM タグ内で。

2.1 v-bind:class は文字列型をサポートしています。文字列値は固定されており、クラスを動的に変更できないため、使用することはお勧めできません。

HTML代码：
<div :class=" &#39;classA classB&#39; ">Demo1</div>
渲染后的HTML:

2.2 v-bind:class をサポートデータ変数。変数値が変更されると、クラスも同時に更新されます。 v-bind:class ディレクティブの値は、JavaScript 式

HTML コード:

<div :class="classA">Demo2</div>

Javascript コード:

などのバインディング式に限定されます。

data: {
  classA: 'class-a'  //当classA改变时将更新class
}

レンダリングされた HTML:

<div class="class-a">Demo2</div>

命令に書かれた値は JavaScript 式などの式とみなされ、v-bind:class は三項演算を受け入れます:

HTML コード:

<div :class="classA ? &#39;class-a&#39; : &#39;class-b&#39; ">Demo3</div>

レンダリングされた HTML:

<div class="class-a">Demo3</div>

2.3 v-bind:class はオブジェクトをサポートし、オブジェクトが変更されるとクラスは動的に更新されます

HTML コード:

<div :class="{ &#39;class-a&#39;: isA, &#39;class-b&#39;: isB}">Demo4</div>

Javascript コード:

data: {
  isA: false,  //当isA改变时，将更新class
  isB: true    //当isB改变时，将更新class
}

レンダリングされた HTML:

<div class="class-b">Demo4</div>

HTML コード:

<div :class="objectClass">Demo5</div>

Javascript コード:

data: {
  objectClass: {
    class-a: true,
    class-b: false
  }
}

レンダリングされた HTML :

<div class="class-a">Demo5</div>

2.4: v-bind:class は配列をサポートしています。配列内の変数が変更されると、クラス リストは動的に更新されます。

HTML コード:

<div :class="[classA, classB]">Demo6</div>

Javascript コード:

data: {
  classA: 'class-a',
  classB: 'class-b'
}

レンダリングされた HTML:

<div class="class-a class-b">Demo6</div>

配列にはオブジェクト タイプを含めることができます。配列内のオブジェクト オブジェクトが変更されると、クラス リストも更新されます

HTML コード:

<div :class="[classA, classB]">Demo7</div>

JavaScript コード:

data: {
  classA: 'class-a',
  objectClass: {
    classB: 'class-b',  // classB 的值为class-b, 则将classB的值添加到class列表
    classC: false,    // classC值为false,将不添加classC
    classD: true    // classD 值为true，classC将被直接添加到class列表
}
}

レンダリングされた HTML:

<div class="class-a class-b classD">Demo7</div>

関連する推奨事項:

2020 フロント-end vue の面接の質問 大きな概要 (回答付き)

vue チュートリアルの推奨事項: 2020 年の最新の vue.js ビデオ チュートリアル 5 選

プログラミング関連の詳細については、プログラミング教育をご覧ください。 ！

以上がvueでクラスを動的にバインドするにはどうすればよいですか?手法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。