普通的css引入：
变量引入：
通过定义一个变量fontColor来通过v-bind来进行绑定在h3z的class中
<!--变量引入-->
<h3 :class="fontColor">Vue</h3>
注意：v-bind后面必须跟一个属性或者一个方法
当然我们也可以通过数组的形式引入多个class：
html:
<!--以数组的形式引入多个-->
<h3 :class="[fontColor,fontBackgroundColor]">欢迎来到perfect*博客园</h3>
使用json对象的方式，在json中也可以使用多种方式
key是样式的名称，对应的值是一个boolean类型，相当于一个开关
HTML：
<!--使用json方式-->
<h3 :class="{myColor:flag,myBackgroundColor:!flag}">欢迎来到perfect*博客园</h3>
使用数组+json方式；
html:
<!--使用数组+json方式-->
<h3 :class="[fontSize,{myColor:flag,myBackgroundColor:flag}]">欢迎来到perfect*博客园</h3>
class中 写的是变量引入和json对象
绑定style：
HTML：
<!--绑定style：-->
<h3 :style="[colorA,colorB]">欢迎来到perfect*博客园</h3>
可以通过数组引入多个，引入一个时就不需要数组了，同绑定class相同，只是定义变量的值不一样。
以上示例所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-bind处理style与class</title>
<script src="../js/vue.js"></script> <script> window .onload= () =>{
new Vue({
el:"#one",
data:{
fontColor:"myColor",
fontBackgroundColor:"myBackgroundColor",
flag:true,
fontSize:"myFontSize",
colorA:{color:'rgb(53,73,93)'},
colorB:{backgroundColor:'rgb(65,184,131)'} },
methods:{ }
});
}
</script>
<style>
.myColor{
color: rgb(,,);
text-align: center;
}
.myBackgroundColor{ background: rgb(,,);
}
.myFontSize{
font-size: 100px;
} </style>
</head>
<body>
<div id="one">
<!--普通的css引入-->
<!--<h3 class="myColor">Vue</h3>--> <!--变量引入-->
<!--<h3 :class="fontColor">Vue</h3>--> <!--以数组的形式引入多个-->
<!--<h3 :class="[fontColor,fontBackgroundColor]">欢迎来到perfect*博客园</h3>--> <!--使用json方式-->
<!--<h3 :class="{myColor:flag,myBackgroundColor:!flag}">欢迎来到perfect*博客园</h3>--> <!--使用数组+json方式-->
<!--<h3 :class="[fontSize,{myColor:flag,myBackgroundColor:flag}]">欢迎来到perfect*博客园</h3>--> <!--绑定style：-->
<h3 :style="[colorA,colorB]">欢迎来到perfect*博客园</h3> </div>
</body>
</html>
使用v-bind处理class与style