vue--class&styleダイナミックバインディング

1111 ワード

原文のリンク:http://www.cnblogs.com/zjh-study/p/10654941.html
classダイナミックバインディング
1、対象文法
v-bind命令による動的バインディング属性により、classを動的に切り替えます。

Hello World

isActiveの値を変えることによって、divダイナミックにactiveというclassを持つかどうかも同じです。

Hello World

または直接にdataに対象として展示します。

Hello World

// classObj
data: {
    classObj: {
        active: true,
        error: false
    }
}

2、配列文法

Hellow World

動的バインディングを望むなら、三元表現を使ってもいいです。配列条件の判断がくどいので、対象に合わせることができます。二、styleダイナミックバインディング
1、対象文法
v-bind命令により動的バインディング属性が動的に切り替わります。


data: {
colorRed: 'red',
fSize: '30px'
}

2、配列文法


data: {
rcolor: 'red',
fsize: '30px'
}

三、スタイル互換性

// flex

転載先:https://www.cnblogs.com/zjh-study/p/10654941.html