说明：有些部分我只是相当于做一个学习笔记，加强记忆之用。所以可能阅读性不是那么强。如果有参考我这类博客的人，那么请见谅。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue5</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link rel="stylesheet" type="text/css" href="main.css"/>-->
<script src="vue.js"></script>
</head>
<body>
<!--class与style是html元素的属性，在vue中应该使用v-bind来设置样式属性-->
<!--vue.js的v-bind专门对此做了加强，表达式的结果除了字符串，还可以是对象或者数组-->
<div id="app">
<!--这里:class等价于v-bind="class",使用了缩写-->
<!--第一部分-->
<!--1.为:class设置一个对象，从而可以切换class-->
<div :class="{classA:isClassA}">this will be orange</div> <!--2.我们也可以在对象中传入更多的属性来切换多个class-->
<!--hasError设置的样式覆盖了isClassA的字体颜色样式-->
<div :class="{classA:isClassA, hasError:hasError}">this will be red</div> <!--3.我们也可以直接绑定数据里的一个对象-->
<div :class="classObject">this will be same to the second</div> <!--4.我们可以绑定返回对象的计算属性；比较常用且强大-->
<div :class="classObject1">this will be red</div> <!--5.我们可以为:class设置一个数组-->
<div :class="[classB, classC]">this will be red</div> <!--6.使用三元表达式来切换class-->
<div :class="[classB, isClassC? classC :'']">this is red too</div> <br>
<!--第二部分-->
<!--:style可以用来设置样式-->
<div :style="{border:border,fontSize:fontSize+'px'}">this is style </div>
<br>
<!--:style绑定到样式对象-->
<div :style="styleObject">this is style2</div>
<br>
<!--使用数组将多个样式对象运用到一个元素上-->
<div :style="[style1,style2]">this is style3</div> <!--:style使用需要添加浏览器引擎前缀的css属性时，如transform时，vue.js会自动侦测并添加相关前缀-->
</div> <style>
#app .classA, #app .isClassA1{
color: orange;
}
#app .hasError, #app .hasError1{
color: red;
font-size: 20px;
}
</style> <script>
var vm=new Vue({
el: '#app',
data:{
isClassA: true,
hasError: true,
classObject:{
isClassA1: true,
hasError1: true
},
classB: 'classA',
classC: 'hasError',
isClassC :true, border: '1px solid gold',
fontSize: 20,
styleObject:{
color: 'orange',
border: '1px solid black'
},
style1:{
color:'silver'
},
style2:{
border:'1px solid gold',
fontSize: '20px'
}
},
computed:{
classObject1:function(){
return {
classA: this.isClassA && !this.hasError,
hasError: this.hasError
}
}
}
});
</script>
</body>
</html>
运行结果：
