vue.js-class属性绑定与细节

案例一：class属性绑定（1）

目标：可以设置v-bind:class设置一个对象，从而动态的切换class

为了效果明显，可以给html元素绑定一个点击事件，达到切换isActive的布尔值的效果
css部分：

<style type="text/css">
			.active{
				color: red;
			}
		</style>

body部分：

<p id="app" @click="changeActive()" :class="{active:isActive}">{{msg}}</p>

script部分：

<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					msg:'颜色',
					isActive:false,
				},
				methods:{
					changeActive:function(){
						//简单的写法,切换true/false
						this.isActive=!this.isActive
						//可以打印出实例化vue数据的isActive,检测isActive的布尔值
						console.log(this.isActive)
					}
				}
			})
		</script>

效果如下：
点击一下：

再次点击：

反复点击切换颜色

案例二：class属性绑定（2）

目标：当两个类名同时存在，后面写的样式，会覆盖前面设置过的样式，测试前后的判定标准是什么？

css部分：

<style type="text/css">
			
			.active {
				width: 100px;
				height: 100px;
				color: white;
				background: green;
			}

			.active2 {
				background: red;
			}
		</style>

body部分：

<div id="app" class="box" :class="{ active: isActive,active2: isActive2}">{{msg}}</div>

script部分：

<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
					msg: '颜色',
					isActive: true,
					isActive2: true,
				}

			})
		</script>

结果如下：

<div id="app" class="box active active2">颜色</div>

效果如下：

小结：

1、多class类名时，后面写的样式，会覆盖前面设置过的样式，如这次的例子中的background的颜色，在active类名中为green绿色，在active2中为red红色，当isActive和isActive2同为true时，两个类名同时添加，isActive2（后面的）的红色样式会覆盖isActive（前面的）的绿色；
2、前后顺序的判断：
1.不是:class="{ active: isActive,active2: isActive2}"的顺序
2.也不是实例化vue中的isActive2: true,isActive: true的顺序
3.而是css样式中style的

.active {
				width: 100px;
				height: 100px;
				color: white;
				background: green;
			}

.active2 {
				background: red;
			}

的先后（前后）顺序！！

如有出入，欢迎指正！！