vue中class和style設定的相關方法

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. 屬性

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

   登入後複製
2. :class="{red: true, gray: true}"

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

   登入後複製
   第二種方法也是可以呼叫vue參數了的data屬性的,記住，Vue裡面一切皆是資料

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

   登入後複製

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

   登入後複製
3. :class="json",第二種方法的精簡版，官方版本

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

   登入後複製

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

登入後複製

和class基本上相同

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

登入後複製

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

登入後複製

1. :style="[a, b]", a, b對應的是data裡的兩個json資料

1. 更多vue中class和style設定的相關方法 相關文章請關注PHP中文網！