1. 往常的行内样式,选择器样式，肯定是可以的:
<div style="height:20px;width:20px;background:red"></div>
2. vue特有
说明：
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可
不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
可以是字符串，或者对象数组
2.1 行内有class和:class，style和:style是可以同在的，都起作用
<div style="height:50px;width:120px;background:red" :style="{color:activeColor,fontSize:fontSize + 'px'}"> 凡夫俗子</div>
2.2 绑定html class
2.2.1 对象语法
模板：
// {active, color} 不跟布尔表示是true的想法也是错的
<div
class="button_container"
:class="{ active: isActive, color: isColor}"
>
凡夫俗子
</div>
data：
data() {
return {
isActive: true,
isColor: true
};
}
css：
.active {
font-size: 20px;
}
.color {
color: red;
}
看到这里有些人可能有一个想法，改成如下：
这是万万不行的，这样就不是字符串了。
<template>
<div
class="button_container"
:class="styleObject"
>
凡夫俗子
</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
isColor: true,
styleObject: {
active: this.isActive,
color: this.isColor
}
};
},
created() {
},
methods: {
},
computed: {
},
};
</script>
<style scoped>
.button_container {
width: 207px;
height: 60px;
margin: 35px;
line-height: 60px;
text-align: center;
background: #2e5afb;
box-shadow: 3px 8px 17px 1px rgba(46, 90, 251, 0.6);
border-radius: 6px;
}
.active {
font-size: 20px;
}
.color {
color: red;
}
</style>
当isActive或者isColor变化时class列表也将更新，试图也会更新，这就是数据驱动视图
此时可以利用计算属性换一种展示的方法：
<template>
<div
class="button_container"
:class="classObject"
>
凡夫俗子
</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
isColor: true,
};
},
created() {
},
methods: {
},
computed: {
classObject: function() {
return {
active: this.isActive,
color: this.isColor
}
}
}
};
</script>
<style scoped>
.button_container {
width: 207px;
height: 60px;
margin: 35px;
line-height: 60px;
text-align: center;
background: #2e5afb;
box-shadow: 3px 8px 17px 1px rgba(46, 90, 251, 0.6);
border-radius: 6px;
}
.active {
font-size: 20px;
}
.color {
color: red;
}
</style>
2.2.2数组语法
<template>
<div
class="button_container"
:class="[activeClass,colorClass]"
>
凡夫俗子
</div>
</template>
<script>
export default {
data() {
return {
isActive: 'true',
activeClass: 'active',
colorClass: 'color'
};
},
created() {
},
methods: {
},
computed: {
}
};
</script>
<style scoped>
.button_container {
width: 207px;
height: 60px;
margin: 35px;
line-height: 60px;
text-align: center;
background: #2e5afb;
box-shadow: 3px 8px 17px 1px rgba(46, 90, 251, 0.6);
border-radius: 6px;
}
.active {
font-size: 20px;
}
.color {
color: red;
}
</style>
数组语法怎么进行一个条件渲染
//会始终添加colorClass的类，但是activeClass会进行条件添加
<div
class="button_container"
:class="[isActive ? activeClass:'', colorClass]"
>
凡夫俗子
</div>
有多个class属性需要进行一个条件渲染的话
<div
class="button_container"
:class="[{active: isActive},colorClass]"
>
凡夫俗子
</div>
2.2.3用在组件上
当在一个自定义组件上使用 class property 时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。
//组件代码
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
使用的时候添加了两个类：
<my-component class="baz boo"></my-component>
组件最终渲染：
<p class="foo bar baz boo">Hi</p>
当然上述的对象或者数组样式语法进行一个 数据绑定也是可以的。
<my-component :class="{ active: isActive }"></my-component>
当isActive为true的时候那么html就会被渲染为
<p class="foo bar active">Hi</p>