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

5.2　绑定多个样式

我们可以为v-bind：class设置一个多元素的对象来绑定多个样式。通过改变对象中每个元素的键值，从而达到动态切换多个class的目的。基础用法如下：

v-bind:class="{样式名称1:变量1, 样式名称2:变量2, 样式名称n:变量n}"

我们下面做一个示例：

1）定义2个样式—lvse_qukuai和cuowu。

2）在data区域定义3个布尔型变量—isActive（值为true）、hasError（值为true）和noError（值为false）。

3）绑定样式，代码如下：

<div v-bind:class="{lvse_qukuai: isActive,cuowu:hasError}"></div>
<div v-bind:class="{lvse_qukuai: isActive,cuowu:noError}"></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">
    <!--属性isActive的值（可以理解为变量）如果为true，则显示绿色的区块；否则隐藏-->
    <!--lvse_qukuai和cuowu是样式的名称-->
    <!--属性hasError的值（可以理解为变量）为true，覆盖绿色的背景，显示红色背景-->
    <div v-bind:class="{lvse_qukuai: isActive,cuowu:hasError}"></div>
    <hr>
    <!--属性noError的值（可以理解为变量）为false，不适用cuowu的样式，也就是不发生改变，还是
        绿色背景-->
    <div v-bind:class="{lvse_qukuai: isActive,cuowu:noError}"></div>
</div>

<script>
new Vue({
    el: '#app',
    data: {
        isActive: true,
        hasError: true,
        noError: false
    }
})
</script>
    
</body>
</html>

效果如图5-2所示。

图5-2　绑定多个样式

我们将isActive设置为true，显示样式lvse_qukuai对应的内容（绿色区块）；将hasError设置为true，显示样式cuowu对应的内容（红色区块）。

提示　同绑定class属性一样，这里的样式名称也可以直接写lvse_qukuai，可以加上单引号，如'lvse_qukuai'。变量isActive不能添加单引号，如果添加了，就会被解析为true。

上一章目录下一章