2017.04 vue学习笔记---04 class与style绑定(2)数组语法

<!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>

学习是对自己负责，自己是职业发展的负责人！