vue.js はクラスとスタイルのスタイルをバインドします-jsチュートリアル-php.cn

vue.js はクラスとスタイルのスタイルをバインドします

高洛峰

リリース： 2017-01-12 13:29:27

オリジナル

1165 人が閲覧しました

データバインディングの一般的な要件は、要素のクラスリストとそのインラインスタイルを操作することです。これらはどちらも属性であるため、v-bind を使用して処理できます。式の最後の文字列を評価するだけで済みます。ただし、文字列の連結は面倒でエラーが発生しやすくなります。したがって、Vue.js は、クラスおよびスタイルとともに使用される場合に特に v-bind を強化します。文字列に加えて、式の結果の型はオブジェクトまたは配列にすることもできます。

v-bind:class または :class を使用してスタイルまたはクラスをバインドします

クラスをバインド

<div class="test">
  <div :class="{active:isActive,cc:isCc}"></div>
 </div>

ログイン後にコピー

js コード

var myVue = new Vue({
   el: ".test",
   data: {
     isActive:true,
     isCc:false
   },
 });

ログイン後にコピー

または次のコードも実装できます

<div class="test">
   <div :class=classObject></div>
 </div>

ログイン後にコピー

js コード

var myVue = new Vue({
    el: ".test",
    data: {
      classObject:{
        active:true
      }
    },
  });

ログイン後にコピー

配列を介してクラスをバインドする

<div class="test">
  <div :class="[activeClass,error]">dsdsd</div>
</div>

ログイン後にコピー

jsコード

var myVue = new Vue({
   el: ".test",
   data: {
     activeClass:"active",
     error:"ddd"
   },
 });

ログイン後にコピー

style属性をバインドする

<div class="test">
    <div :style=styleObject>dsdsd</div>
  </div>

ログイン後にコピー

jsコード

var myVue = new Vue({
  el: ".test",
  data: {
    styleObject:{
     color: "red",
      fontSize: "30px"
    }
  },
});

ログイン後にコピー

以上がこの記事の全内容です。とても便利ですので、皆さんも PHP 中国語 Web サイトをサポートしていただければ幸いです。

vue.js バインディングクラスとスタイルに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。