vue.jsでクラスを取得する方法-Vue.js-php.cn

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

coldplay.xixi

リリース： 2020-11-19 10:48:12

オリジナル

7268 人が閲覧しました

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

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

#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代码： <div :class=" &#39;classA classB&#39; ">Demo1</div> 渲染后的HTML: <div class="classA classB">Demo1</div></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代码： <div :class="classA">Demo2</div> Javascript代码： data: { classA: &#39;class-a&#39; //当classA改变时将更新class } 渲染后的HTML: <div class="class-a">Demo2</div></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代码： <div :class="classA ? &#39;class-a&#39; : &#39;class-b&#39; ">Demo3</div> 渲染后的HTML: <div class="class-a">Demo3</div></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代码： <div :class="[classA, classB]">Demo6</div> Javascript代码： data: { classA: &#39;class-a&#39;, classB: &#39;class-b&#39; } 渲染后的HTML: <div class="class-a class-b">Demo6</div></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>

ログイン後にコピー

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