vue学习笔记(三)class和style绑定

痛定思痛。 2023-06-26 12:28 12阅读 0赞

# 前言 #

通过上一章的学习[vue学习笔记(二)vue的生命周期和钩子函数][vue_vue]，我们已经更近一步的知道了关于vue的一些知识，本篇博客将进一步探讨vue其它方面的内容，vue中关于class和style绑定，关于class和style我们并不陌生，这个在学习css的时候就是家常便饭了，操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 `v-bind` 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 `v-bind` 用于 `class` 和 `style` 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组，所以本章将带你了解vue中如何绑定class和style。

# 本章目标 #

*  学会使用绑定class的对象语法
 *  学会使用绑定class的数组语法
 *  学会使用绑定style的对象语法
 *  学会使用绑定style的数组语法

# class的对象语法 #

## (1)直接写class属性 ##

### (1)可以传给 v-bind:class 一个对象，以动态地切换 class ###

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthy，如果为truthy则使用active这个类，如果为false则不使用active这个类。  
注意：**在 javascript 中，truthy（真值）指的是在布尔值上下文中，转换后的值为真的值。所有值都是真值，除非它们被定义为 假值（即除 false、0、""、null、undefined 和 NaN 以外皆为真值**。  
JavaScript 中的真值示例如下（将被转换为 true，if 后的代码段将被执行）

if (true)
    if ({})
    if ([])
    if (42)
    if ("foo")
    if (new Date())
    if (-42)
    if (3.14)
    if (-3.14)
    if (Infinity)
    if (-Infinity)

(2)在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。

data中的数据

data: {
      isActive: true,
      hasError: false
    }

结果：

当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true，class 列表将变为 “static active text-danger”  
示例：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                div{
                    width: 100px;
                    height: 100px;
                }
                .red{
                    background: red;
                }
                .yellow{
                    background: yellow;
                }
                .border{
                    border: 1px solid black;
                }
            </style>
        </head>
        <body>
            <div id="app">
                <div class="border" :class="{red:red}"></div>
            </div>
            <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                const vm=new Vue({
                    el:'#app',
                    data:{
                        red:true,    //当red的truthy时，这个类才会生效
                    }
                })
            </script>
        </body>
    </html>

结果：  
![image][]

### (2)class作为对象处理 ###

当我们需要在一个元素上绑定很多个类的时候，我们就可能需要写很长很长的代码，这样的代码对于我们今后的维护是十分糟糕的，所以为了解决这个问题，我们可以将需要添加的类抽取出来，作为一个对象处理。  
**示例：**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>class作为对象处理</title>
            <style type="text/css">
                div{
                    width: 100px;
                    height: 100px;
                }
                .red{
                    background: red;
                }
                .yellow{
                    background: yellow;
                }
                .border{
                    border: 1px solid black;
                }
                .radius{
                    border-radius: 50%;
                }
            </style>
        </head>
        <body>
            <div id="app">
                <div :class="classObj"></div>
            </div>
            <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                const vm=new Vue({
                    el:'#app',
                    data:{
                        red:true,    //当red的true时，这个类才会生效
                        classObj:{
                            red:true,
                            border:true,
                            radius:true
                        }
                    }
                })
            </script>
        </body>
    </html>

**结果：**  
**![image][image 1]**  
可以看到，我们将需要添加的类作为一个对象，然后绑定，也是一样的效果。

### (3)class作为计算属性处理 ###

class作为计算属性，这个的话就比较厉害了，这里可以进行逻辑处理等等  
**示例：**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                div{
                    width: 100px;
                    height: 100px;
                }
                .red{
                    background: red;
                }
                .yellow{
                    background: yellow;
                }
            </style>
        </head>
        <body>
            <div id="app">
                <div :class="computeClass"></div>
            </div>
            <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                const vm=new Vue({
                    el:'#app',
                    data:{
                        red:true,
                        yellow:true
                    },
                    computed:{
                        computeClass(){
                            return {
                                red:this.red&&this.yellow
                            }
                        }
                    }
                })
            </script>
        </body>
    </html>

**结果**  
![image][image 2]

# class的数组语法 #

### (1)直接绑定在元素上 ###

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表

data中的数据

data: {
      activeClass: 'active',
      errorClass: 'text-danger'
    }

结果：

**示例：**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                div{
                    width: 100px;
                    height: 100px;
                }
                .green{
                    background: green;
                }
                .border{
                    border: 1px solid black;
                }
            </style>
        </head>
        <body>
            <div id="app">
                <div :class="[green,border]"></div>
            </div>
            <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                const vm=new Vue({
                    el:'#app',
                    data:{
                        green:'green',
                        border:'border'
                    }
                })
            </script>
        </body>
    </html>

**结果：**  
**![image][image 3]**

### (2)使用三元表达式绑定 ###

如果你也想根据条件切换列表中的 class，可以用三元表达式

**示例：**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                div{
                    width: 200px;
                    height: 200px;
                }
                .red{
                    background: red;
                }
                .border{
                    border: 1px solid green;
                }
                .green{
                    background: green;
                }
            </style>
        </head>
        <body>
            <div id="app">
                <div :class="[isActive? red: green]"></div>
            </div>
            <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                const vm=new Vue({
                    el:'#app',
                    data:{
                        isActive:false,
                        red:"red",
                        green:'green'
                    }
                })
            </script>
        </body>
    </html>

**结果：**  
![image][image 4]

### (3)数组和对象 ###

当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法

**示例：**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                div{
                    width: 300px;
                    height: 300px;
                }
                .red{
                    background: red;
                }
                .radius{
                    border-radius: 50px;
                }
            </style>
        </head>
        <body>
            <div id="app">
                <div :class="[{red:red},radius]"></div>
            </div>
            <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                const vm=new Vue({
                    el:'#app',
                    data:{
                        red:true,
                        radius:'radius'
                    }
                })
            </script>
        </body>
    </html>

**结果：**  
![image][image 5]

# style的对象语法 #

### (1)直接绑定style ###

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

data中的数据

data: {
      activeColor: 'red',
      fontSize: 30
    }

**示例：**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                <div :style="{fontSize:fontSize+'px',color:color}">你好</div>
            </div>
            <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                const vm=new Vue({
                    el:'#app',
                    data:{
                        color:'red',
                        fontSize:30
                    }
                })
            </script>
        </body>
    </html>

**结果：**  
![image][image 6]

### (2)用对象绑定style ###

data中的数据

data: {
      styleObject: {
        color: 'red',
        fontSize: '13px'
      }
    }

**示例：**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                <div :style="styleObj">欢迎学习vue绑定style</div>
            </div>
            <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                const vm=new Vue({
                    el:'#app',
                    data:{
                        styleObj:{
                            color:'red',
                            fontSize:'30px',
                            fontWeight:'bold'
                        }
                    }
                })
            </script>
        </body>
    </html>

**结果：**  
![image][image 7]

### (3)用计算属性绑定style ###

**示例：**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                <div :style="computeStyle">你好</div>
            </div>
            <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                const vm=new Vue({
                    el:'#app',
                    data:{
                        bl:false
                    },
                    computed:{
                        computeStyle(){
                            return{
                                color:this.bl?'red':'blue',
                                fontSize:this.bl?'20px':'50px',
                                fontWeight:this.bl?'bold':'normal'
                            }
                        }
                    }
                })
            </script>
        </body>
    </html>

**结果：**  
![image][image 8]

# style的数组语法 #

### (1)直接绑定在元素上 ###

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上

**示例：**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                div{
                    width: 100px;
                    height: 100px;
                    display: inline-block;
                    background: green;
                }
            </style>
        </head>
        <body>
            <div id="app">
                <div :style="[styleObj1,styleObj2]">你好</div>
            </div>
            <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                const vm=new Vue({
                    el:'#app',
                    data:{
                        styleObj1:{
                            color:'red',
                        },
                        styleObj2:{
                            textAlign:'center',
                            lineHeight:'100px'
                        }
                    }
                })
            </script>
        </body>
    </html>

**结果：**  
![image][image 9]

### (2)多重值问题 ###

style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

**示例：**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                div{
                    width: 100px;
                    height: 100px;
                    background: red;
                }
            </style>
        </head>
        <body>
            <div id="app">
                <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
            </div>
            <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                const vm=new Vue({
                    el:'#app',
                })
            </script>
        </body>
    </html>

**结果：**  
![image][image 10]

[vue_vue]: https://www.cnblogs.com/jjgw/p/12111517.html
[image]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDk2ODA4NS1kNDMyMmEzZTExZDY2MmY4LnBuZw?x-oss-process=image/format,png
[image 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDk2ODA4NS03N2YxNWVkZGZlYzJiYmY0LnBuZw?x-oss-process=image/format,png
[image 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDk2ODA4NS1kZTlmMTIyMjg0OWIwZjliLnBuZw?x-oss-process=image/format,png
[image 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDk2ODA4NS1iOTAyYzA1YTI4ODU5N2ZlLnBuZw?x-oss-process=image/format,png
[image 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDk2ODA4NS05OGU0N2YyOTEwYTFkMGMzLnBuZw?x-oss-process=image/format,png
[image 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDk2ODA4NS1iODU0ZGUyMTIyMGJiOWUzLnBuZw?x-oss-process=image/format,png
[image 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDk2ODA4NS03NmUxMjBlZjIyNjE5ZTljLnBuZw?x-oss-process=image/format,png
[image 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDk2ODA4NS02MjVkODlmY2Q2MmMzMzcyLnBuZw?x-oss-process=image/format,png
[image 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDk2ODA4NS04ZTUwNWFiNDlmYWY2OTE0LnBuZw?x-oss-process=image/format,png
[image 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDk2ODA4NS0zMzFmYjkxZjczODhkYWUxLnBuZw?x-oss-process=image/format,png
[image 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDk2ODA4NS04MmZiMmMwODkwMjNkYjY0LnBuZw?x-oss-process=image/format,png