前端应用_Vue_通过属性绑定为元素设置class类样式（介绍四种方法，用哪个随你）

本文链接：https://blog.youkuaiyun.com/qq_34979346/article/details/98635406

属性绑定用 v-bind , 如果想引用 class 样式，如果没有这节知识，恐怕你要抓头挠腮了.

这个节不用介绍多就介绍四种方法，实际原理差不多，

如果不用属性绑定我们取值是这样的，

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .color{
            color: red;
        }
        .background{
            background-color: green;
        }
        .size{
            width: 300px;
            height: 200px;
        }
        }
    </style>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
    </script>
</head>
<body>
<div id="pp" >

    <div class="size background color">好好学习，天天向上</div>

</div>
<div>
    <script>
        var vue=new  Vue(
            {
                el: '#pp',
                data: {
                   
                }
            }
        )
    </script>

</div>
</body>
</html>

效果图：

在这里插入图片描述

咱们用的以前方法

class="size background color"

我们开始数据绑定介绍第一个方法

1. 直接传递一个数组，注意要通过 v-bin 进行数据绑定

 <div :class="['size', 'background', 'color']">好好学习，天天向上</div>

显示的效果和上边的一样，有的人该说了，这样还没有不绑定用着方便呢，有什么好处呢，

大家想个问题，就是如果类是表达式，如何写，就是当为true 的时候才能显示，否则就不显示。

你用老方法是解决不了的，下边直接上第二个方法

2. 在数组中使用三元表达式

color 三元表达:

 <div :class="['size', 'background', flag?'color':'']">好好学习，天天向上</div>
 var vue=new  Vue(
            {
                el: '#pp',
                data: {
                    flag: false,

                }
            }
        )

当flag 修改为true 字体颜色就显示了，

“flag?‘color’:’” 解释下三元表达式的含义为：

当flag 为true 的时候，返回color ，否则返回为空.

挑剔的人，感觉这样写也是麻烦，只能抛出第三个法宝了，如下

3. 在数组中使用对象来代替三元表达式，提高代码的可读性

<div :class="['size', 'background', {'color':flag}]">好好学习，天天向上</div>

vue 同学优秀吧，这样看上去就好理解了 . 咱们继续推广第四种方法

4. 脱离数组，全部用对象替代

 <div :class="{size:true,background:true,color:true}">好好学习，天天向上</div>

这样就简洁了吧，

在为class 使用v-bind 绑定对象的时候，对象的属性是类名，由于对象的属性可带引号，也可不带引号，所以这里没有写引号，属性的值是一个标识符.

既然全部用对象替代了，也可以把对象写到data里，改造后的效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .color{
            color: red;
        }
        .background{
            background-color: green;
        }
        .size{
            width: 300px;
            height: 200px;
        }

    </style>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
    </script>
</head>
<body>
<div id="pp" >

  <div :class="object01">好好学习，天天向上</div>

</div>
<div>
    <script>
        var vue=new  Vue(
            {
                el: '#pp',
                data: {
                    object01: {size:true,background:true,color:true},
                    flag: true,

                }
            }
        )
    </script>

</div>
</body>
</html>