<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin-bottom: 20px;
}
</style>
<script src="js/vue.js"></script>
<script src="js/jquery-1.12.3.min.js"></script>
</head>
<body>
<!--我们可以把一个数组传给 v-bind:class ，以应用一个 class 列表：-->
<div id="demo1" v-bind:class="[activeClass,errorClass]"></div>
<!--如果你也想根据条件切换列表中的 class ，可以用三元表达式：-->
<div v-bind:class="[isActive? activeClass:'',errorClass]"></div>
<!--此例始终添加 errorClass ，但是只有在 isActive 是 true 时添加 activeClass 。-->
<!--不过，当有多个条件 class 时这样写有些繁琐。可以在数组语法中使用对象语法：-->
<div v-bind:class="[{ active: isActive }, errorClass]">
<script>
var demo1=new Vue({
el:'#demo1',
data:{
activeClass:'active6666',
errorClass:'text-danger'
}
})
</script>
</body>
</html>