vue赋值样式_vue 添加样式分几种方法

一.

new Vue({

el: ‘#app‘,

data: {

isActive: true

}

})

二.

v-bind:class="{ active: isActive, ‘text-danger‘: hasError }">

new Vue({

el: ‘#app‘,

data: {

isActive: true,

hasError: true

}

})

三.

.active {

width: 100px;

height: 100px;

background: green;

}

.text-danger {

background: red;

}

new Vue({

el: ‘#app‘,

data: {

classObject: {

active: true,

‘text-danger‘: true

}

}

})

四.

.active {

width: 100px;

height: 100px;

background: green;

}

.text-danger {

background: red;

}

new Vue({

el: ‘#app‘,

data: {

activeClass: ‘active‘,

errorClass: ‘text-danger‘

}

})

五.

.text-danger {

width: 100px;

height: 100px;

background: red;

}

.active {

width: 100px;

height: 100px;

background: green;

}

new Vue({

el: ‘#app‘,

data: {

isActive: true,

activeClass: ‘active‘,

errorClass: ‘text-danger‘

}

})

六. style内联样式

菜鸟教程

new Vue({

el: ‘#app‘,

data: {

activeColor: ‘green‘,

fontSize: 30

}

})