vue のクラスとスタイル設定の関連メソッド

class&styleスタイル設定

class

htmlコード

<p id="box">
    <strong>阿斯顿发</strong>
</p>

cssコード

.red {
    color: red;
}
.gray {
    background-color: gray;
}

jsコード

window.onload = function() {
    new Vue({
        el: '#box',
        data: {
            red: 'red',
            gray: 'gray'
        }
    });
}

有効にするスタイルの書き方

1. :class="[red, grey]"はデータを呼び出しますvue パラメータ Attribute

   <strong :class="[red, gray]"></strong>

2. :class="{red: true, grey: true}"

   <strong :class="{red: true, gray: true}"></strong>

   2 番目のメソッドは、vue パラメータの data 属性を呼び出すこともできます。Vue のすべては data

   new Vue({
       el: '#box',
       data: {
          red: 'red',
          gray: 'gray',
          a: true,
          b: false
    }   
   });

   <strong :class="{red: a, gray: b}"></strong>

であることを覚えておいてください。

3. :class="json"、2 番目のメソッドの簡易バージョン、正式バージョン

   new Vue({
       el: '#box',
       data: {
           red: 'red',
           gray: 'gray',
           json: {
               a: true,
               b: false
           }
       }
   });

<strong :class="json"></strong>

style

は基本的に class

1. :style="{}"

と同じです

<strong :style="{color: &#39;red&#39;, backgroundColor: &#39;gray&#39;}"></strong>

1. :style="a"

   new Vue({
       el: '#box',
       data: {
           red: 'red',
           gray: 'gray',
           a: {
               color: 'red',
               backgroundColor: 'gray' //注意复合样式的书写规范
           }
       }
   });

   <strong :style="a">阿斯顿发</strong>

2. :style="[a, b]", a, b は data 内の 2 つの json データに対応します

vue のその他のクラスとスタイルの設定関連する方法と関連記事については、PHP 中国語 Web サイトに注目してください。