Vue.js入门与商城开发实战
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

5.3　绑定数据里的一个对象

我们可以先定义一个样式的对象，然后直接在v-bind：class中设置对象的名称，即实现对数据里对象的绑定。基础用法如下：

v-bind:class="对象名"

我们下面做一个示例：

1）定义两个样式—lvse_qukuai（绿色区块）和cuowu（红色区块）。

2）定义两个样式对象—classObject1（绿色区块）和classObject2（红色区块）。

//自定义样式对象classObject1
classObject1: {
    lvse_qukuai: true,
    cuowu: true
},
//自定义样式对象classObject2
classObject2: {
    lvse_qukuai: true,
    cuowu: false
}

3）直接使用v-bind：class语法绑定样式对象。

<div v-bind:class="classObject1">红色背景</div>
<div v-bind:class="classObject2">绿色背景</div>

完整的示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue.js样式-class属性绑定数据里的一个对象</title>
    <!--加载本地vue.js的框架-->
    <script src="vue2.2.2.min.js"></script>
    <style>
        /*自定义一个绿色区块的样式：宽、高为100px，绿色背景*/    
        .lvse_qukuai {
            width: 100px;  /*宽度*/    
            height: 100px; /*高度*/    
            background-color: green;/*绿色背景*/
        }
        .cuowu{
            background-color: red;/*红色背景*/
        }
    </style>    
</head>
<body>
    
<!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
<div id="app">
    <!--使用对象classObject1来绑定样式-->
    <!--对象里面先是显示lvse_qukuai的绿色背景，然后再被样式cuowu的红色背景覆盖-->
    <div v-bind:class="classObject1">红色背景</div>
    <hr>
    <!--使用对象classObject2来绑定样式-->
    <!--对象里面显示lvse_qukuai的绿色背景（样式cuowu的红色背景因为设置为false，所以不覆
        盖）-->
    <div v-bind:class="classObject2">绿色背景</div>
</div>

<script>
//Vue语句-开始        
new Vue({
    el: '#app',//app为前面div代码块的id的值，通过“#”绑定
    data: {
        //自定义样式对象classObject1
        classObject1: {
            lvse_qukuai: true,//初始化属性
            cuowu: true//初始化属性
        },//后面有数据，则这里定义完毕后面需要跟上逗号“，”
        //自定义样式对象classObject2
        classObject2: {
            lvse_qukuai: true,//初始化属性
            cuowu: false//初始化属性
        }//后面没有数据，则这里定义完毕，后面不需要跟上逗号“，”
    }
})//Vue语句-结束
</script>
    
</body>
</html>

效果如图5-3所示。

图5-3　绑定数据里的一个对象

上一章目录下一章