Java 后端学习笔记

提示

本文主要讲解 Vue 中 Class 与 Style 绑定。@ermo

# Class 与 Style 绑定

# HTML class

# 对象语法

v-bind:class 可以给元素动态绑定样式。完整语法如下：

<div v-bind:class="{active: isActive}"></div>

完整示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
    <style>
        .active {
            width: 50px;
            height: 50px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-bind:class="{active: isActive}"></div>

        <button @click="changeBg">切换颜色</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isActive: true
            },
            methods: {
                changeBg: function() {
                    this.isActive = !this.isActive;
                }
            }
        });
    </script>
</body>
</html>

v-bind:class 对应的值是一个对象，可以编写多个样式属性。

<div v-bind:class="{active: isActive, 'text-danger': hasError}"></div>

当样式过多的时候，绑定的对象不必编写到模板中：

<div v-bind:class="classObj"></div>

对应 data 为：

data: {
    classObj: {
        active: true,
        'text-danger': false
    }
}

也可以将样式对象 classObj 通过计算属性返回，这是一个强大且常用的功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
    <style>
        .active {
            width: 50px;
            height: 50px;
            background-color: green;
        }
        .text-danger {
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-bind:class="classObj">
        </div>

        <button @click="changeActive">切换颜色</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isActive: true,
                error: null
            },
            computed: {
                classObj: function() {
                    return {
                        active: this.isActive && !this.error,
                        'text-danger': this.error && this.error.type === 'fatal'
                    }
                }
            },
            methods: {
                changeActive: function() {
                    if (this.error == null) {
                        this.error = {};
                        this.error.type = 'fatal';
                    } else {
                        this.error = null;
                    }
                    this.isActive = !this.isActive;
                    
                }
            }
        });
    </script>
</body>
</html>

# 数组语法

可以给 v-bind:class 传一个数组，用于绑定多个样式值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
    <style>
        .active {
            width: 50px;
            height: 50px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-bind:class="[activeClass, errorClass]"></div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                activeClass: 'active',
                errorClass: 'text-danger'
            }
        });
    </script>
</body>
</html>

上例展示为：

<div class="active text-danger"></div>

数组语法同样可以使用三元表达式动态切换元素上的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
    <style>

        .text-danger {
            width: 50px;
            height: 50px;
            background-color: red;
        }
        .active {
            width: 50px;
            height: 50px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-bind:class="[isActive ? active : '', 'text-danger']"></div>
        <button @click="isActive = !isActive">切换</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isActive: true,
                active: 'active'
            }
        });
    </script>
</body>
</html>

上例中 text-danger 样式一致存在，active 样式的优先级更高。点击切换元素的渲染结果为：

<div class="text-danger"></div>

或

<div class="active text-danger"></div>

数组语法也可以使用对象与三元表达式的结合，如下例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
    <style>

        .text-danger {
            width: 50px;
            height: 50px;
            background-color: red;
        }
        .active {
            width: 50px;
            height: 50px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-bind:class="[isActive ? active : '', errorClass]"></div>
        <button @click="isActive = !isActive">切换</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isActive: true,
                active: 'active',
                errorClass: 'text-danger'
            }
        });
    </script>
</body>
</html>

# 绑定内联样式

# 对象语法

内联样式的语法为 v-bind:style。表达式内的值是一个 JavaScript 对象。

样式名使用驼峰命名规则，比如 v-bind:style="{ fontSize: fontSize + 'px' }"。

样式名也可以使用横线分割，这种情况要加单引号，比如 v-bind:style="{ 'font-size': fontSize + 'px' }"。

完整示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body>
    <div id="app">
        <div v-bind:style="{color: activeColor, 'font-size': fontSize + 'px'}">文字</div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                activeColor: 'blue',
                fontSize: 12
            }
        });
    </script>
</body>
</html>

样式绑定中的表达式也可以使用对象绑定，将样式对象放到 Vue 中的 data 中，这样模板看起来更加清晰。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body>
    <div id="app">
        <div v-bind:style="styleObj">文字</div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                styleObj: {
                    color: 'skyblue',
                    'font-size': '12px'
                }
            }
        });
    </script>
</body>
</html>

# 数组语法

样式绑定同样可以使用数组语法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body>
    <div id="app">
        <div v-bind:style="[baseClass, overridingClass]">文字</div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    baseClass: {
                        color: 'red',
                        fontSize: '12px'
                    },
                    overridingClass: {
                        'background-color': 'skyblue',
                        width: '50px',
                        height: '50px'
                    }
                }
            });
        </script>
    </div>
</body>
</html>
上次更新: 2/20/2023, 6:45:13 AM

← 事件处理 →