首頁 > web前端 > css教學 > vue中class和style設定的相關方法

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

高洛峰
發布: 2017-02-18 14:50:06
原創
1517 人瀏覽過

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
            }
        }
    });
    登入後複製
  4. <strong :class="json"></strong>
    登入後複製
style

和class基本上相同

:style="a"
    <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中文網!

相關標籤:
vue
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板