vue.jsでクラスを取得する方法

クラスを取得するための Vue.js メソッド: 1. データ バインディングを使用します。コードは [php 中国の Web サイトDe] です。

#vue.js クラス取得メソッド:

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

vue 命令には v- 接頭辞が付いています。データ バインディング命令 v-bind: 属性名、省略形: 属性名。簡単なデータ バインディングの例は次のとおりです:

<a v-bind:href="http://www.php.com/">php中文网</a>
简写：
<a :href="http://www.php.com/">php中文网</a>

2 ,ダイナミック バインディング クラス

#vue の区切り文字は、デフォルトでは {{ }} です。区切り文字内の文字列はデータ変数とみなされ、

class="{{ className として渡すことができます。 }}"

メソッドを使用してクラスを設定しますが、vue ではこのメソッドを v-bind:class メソッドと混合することはお勧めしません。選択できるのは 2 つのうちの 1 つだけです。 v-bind:class はクラス属性で変数をバインドするメソッドと共存できませんが、ネイティブ クラス機能と共存できます。ネイティブ クラスと v-bind:class は同時に出現することができます。 DOM タグ内の時間。 2.1

v-bind:class

文字列型をサポートします。文字列値は固定されており、クラスを動的に変更できないため、使用することはお勧めできません。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>HTML代码： &lt;div :class=&quot; &amp;#39;classA classB&amp;#39; &quot;&gt;Demo1&lt;/div&gt; 渲染后的HTML: &lt;div class=&quot;classA classB&quot;&gt;Demo1&lt;/div&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div> 2.2 v-bind:class はデータ変数をサポートしており、変数の値が変化するとクラスも同時に更新されます。

v-bind:class

ディレクティブの値は、JavaScript 式などのバインディング式に限定されます。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>HTML代码： &lt;div :class=&quot;classA&quot;&gt;Demo2&lt;/div&gt; Javascript代码： data: { classA: &amp;#39;class-a&amp;#39; //当classA改变时将更新class } 渲染后的HTML: &lt;div class=&quot;class-a&quot;&gt;Demo2&lt;/div&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>ディレクティブに記述された値は、次のような式とみなされます。したがって、

v-bind:class

は三項演算を受け入れます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>HTML代码： &lt;div :class=&quot;classA ? &amp;#39;class-a&amp;#39; : &amp;#39;class-b&amp;#39; &quot;&gt;Demo3&lt;/div&gt; 渲染后的HTML: &lt;div class=&quot;class-a&quot;&gt;Demo3&lt;/div&gt;</pre><div class="contentsignin">ログイン後にコピー</div></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

配列をサポートします。配列内の変数が変更されると、クラス リストは動的に更新されます <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>HTML代码： &lt;div :class=&quot;[classA, classB]&quot;&gt;Demo6&lt;/div&gt; Javascript代码： data: { classA: &amp;#39;class-a&amp;#39;, classB: &amp;#39;class-b&amp;#39; } 渲染后的HTML: &lt;div class=&quot;class-a class-b&quot;&gt;Demo6&lt;/div&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>配列にはオブジェクト タイプを含めることができます。オブジェクト オブジェクトが変更されると、クラス リストも更新されます。

HTML代码：
<div :class="[classA, classB]">Demo7</div>
Javascript代码：
data: {
  classA: &#39;class-a&#39;,
  objectClass: {
    classB: &#39;class-b&#39;,  // 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>

関連する無料学習の推奨事項:

JavaScript

(ビデオ)

以上がvue.jsでクラスを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。