遇见 vue.js --------阿文的vue.js学习笔记（6）------ Class 与 Style 绑定

**
新学习新征程，我们一起踏上学习 vue.js的新长征

… … …

遇见 vue.js --------阿文的vue.js学习笔记(目录)

关注我，我们一起学习进步。

绑定 HTML Class

首先要绑定 Class 肯定要用到 v-bind:class ，

1、对象语法：

含义： 通过传给 v-bind:class 一个对象，以动态地切换 class

(1)你可以通过传入数据属性的方式将其绑定 v-bind:class:" "

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js"></script>

        <style>
        //这里是class属性
        .b{<!-- -->
            color: skyblue;
            width: 100px;
            height: 100px;
            border: 2px solid red;
            }               
        </style>
    </head>
    <body>
        <div id="a">
        //通过在data内声明属性，然后在这里绑定
            <div v-bind:class="cls">123</div>
        </div>        
        <script>
            new Vue({<!-- -->
                el:"#a",
                data:{<!-- -->
                    cls:"b"
                }
            })
        </script>
    </body>
</html>

当然你也可以使用 v-bind:class:"{ }" 在这里插入图片描述
当我们需要绑定的 class 属性多了之后我们也可以在 data 里面直接声明一个数据组：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js"></script>

        <style>
        .a{<!-- -->
            color: skyblue;
            border: 2px solid red;
        }
        .b{<!-- -->         
            width: 100px;
            height: 100px;          
            }
        .c{<!-- -->
            background-color: aqua;
        }
        </style>
    </head>
    <body>
        <div id="a">
            <div v-bind:class="classobject">123</div>
        </div>

        <script>
            new Vue({<!-- -->
                el:"#a",
                data:{<!-- -->
                    classobject:{<!-- -->
                        a:true,
                        b:true,
                        c:true
                    }
                }
            })
        </script>
    </body>
</html>

即我们的 classobject 属性直接将其绑定进去即可。

当然也可以将其改为我们的计算属性，效果也是一样，

    computed:{<!-- -->
                    classobject:function(){<!-- -->
                        return{<!-- -->
                            a:true,
                            b:true,
                            c:true
                        }
                    }
                }