Vue2：小水一下（5）

锅挤2025-12-26 8:21

emmmm为什么这一章叫"小水一下"呢，对的就是那个意思，想水一篇^_^因为这一章有大量的代码，每个代码都很长，所以能凑字数，显得写了很多，但其实就讲了两个很简单的东西：class样式绑定和style样式绑定。如果对web前端有了解的肯定对class和style不陌生，那么这一章所讲的东西就更少了，讲的就是------------------------绑定。ok！！进入正题：

在前端开发中，样式的动态管理是构建交互式应用的关键。Vue提供了两种强大的样式绑定方式：class绑定和style绑定，它们让样式管理变得既灵活又高效。

目录

Class样式绑定

字符串写法

数组写法

对象写法

style样式绑定

对象写法

数组写法

总结

Class样式绑定

写法:class="xxx"，xxx可以是字符串、对象、数组

  • 字符串写法适用于：类名不确定，要动态获取。

  • 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。

  • 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用

下面依次介绍：

字符串写法

最简单的绑定方式，将一个字符串变量直接绑定到class属性。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Class绑定 - 字符串写法</title>
    <script type="text/javascript" src="./vue.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        
        .red {
            color: red;
        }
        
        .blue {
            color: blue;
        }
        
        .green {
            color: green;
        }
        
        .bold {
            font-weight: bold;
        }
        
        .demo-box {
            padding: 20px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        
        button {
            margin: 5px;
            padding: 8px 16px;
            background: #42b983;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        button:hover {
            background: #3aa876;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>Class绑定 - 字符串写法</h2>
        <p>绑定一个字符串变量到class属性</p>
        
        <!-- 示例区域 -->
        <div :class="textClass" class="demo-box">
            这段文字的颜色由 textClass 变量控制
        </div>
        
        <!-- 控制按钮 -->
        <div>
            <button @click="textClass = 'red'">设为红色</button>
            <button @click="textClass = 'blue'">设为蓝色</button>
            <button @click="textClass = 'green'">设为绿色</button>
            <button @click="textClass = 'red bold'">红色加粗</button>
        </div>
        
        <p style="margin-top: 20px; color: #666;">
            当前class值: <strong>{{ textClass }}</strong>
        </p>
    </div>

    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                textClass: 'red'
            }
        });
    </script>
</body>
</html>

数组写法

通过数组绑定多个class，可以动态添加或移除某个类。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Class绑定 - 数组写法</title>
    <script type="text/javascript" src="./vue.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        
        .red {
            color: red;
        }
        
        .blue-bg {
            background-color: lightblue;
            padding: 15px;
        }
        
        .big-text {
            font-size: 20px;
        }
        
        .rounded {
            border-radius: 10px;
        }
        
        .border {
            border: 2px solid #333;
        }
        
        .demo-box {
            margin: 20px 0;
            padding: 20px;
        }
        
        button {
            margin: 5px;
            padding: 8px 16px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        button:hover {
            background: #2980b9;
        }
        
        .active {
            background: #2ecc71 !important;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>Class绑定 - 数组写法</h2>
        <p>通过数组绑定多个class，可以动态添加/移除</p>
        
        <!-- 示例区域 -->
        <div :class="classArray" class="demo-box">
            这个元素应用了数组中的多个class
        </div>
        
        <!-- 控制按钮 -->
        <div>
            <button @click="toggleClass('red')" :class="{ active: isActive('red') }">
                切换红色文字
            </button>
            <button @click="toggleClass('blue-bg')" :class="{ active: isActive('blue-bg') }">
                切换蓝色背景
            </button>
            <button @click="toggleClass('big-text')" :class="{ active: isActive('big-text') }">
                切换大号文字
            </button>
            <button @click="toggleClass('rounded')" :class="{ active: isActive('rounded') }">
                切换圆角
            </button>
            <button @click="toggleClass('border')" :class="{ active: isActive('border') }">
                切换边框
            </button>
        </div>
        
        <p style="margin-top: 20px; color: #666;">
            当前应用的class: <strong>{{ classArray.join(', ') }}</strong>
        </p>
    </div>

    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                classArray: ['red', 'big-text', 'rounded']
            },
            methods: {
                toggleClass(className) {
                    const index = this.classArray.indexOf(className);
                    if (index > -1) {
                        // 如果已存在，移除
                        this.classArray.splice(index, 1);
                    } else {
                        // 如果不存在，添加
                        this.classArray.push(className);
                    }
                },
                isActive(className) {
                    return this.classArray.includes(className);
                }
            }
        });
    </script>
</body>
</html>

对象写法

通过对象控制class的添加和移除，是最常用、最灵活的方式。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Class绑定 - 对象写法</title>
    <script type="text/javascript" src="./vue.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        
        .success {
            color: #27ae60;
        }
        
        .warning {
            color: #f39c12;
        }
        
        .error {
            color: #e74c3c;
        }
        
        .highlight {
            background-color: #fffacd;
            padding: 10px;
        }
        
        .shadow {
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .demo-box {
            margin: 20px 0;
            padding: 30px;
            border: 1px solid #ddd;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        button {
            margin: 5px;
            padding: 8px 16px;
            background: #9b59b6;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        button:hover {
            background: #8e44ad;
        }
        
        .toggle-btn {
            background: #95a5a6;
        }
        
        .toggle-btn.active {
            background: #2ecc71;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>Class绑定 - 对象写法</h2>
        <p>通过对象控制class的添加和移除（最常用）</p>
        
        <!-- 示例区域 -->
        <div :class="classObject" class="demo-box">
            通过对象属性值控制class的应用
        </div>
        
        <!-- 控制按钮 -->
        <div>
            <button @click="classObject.success = !classObject.success" 
                    :class="{ active: classObject.success }">
                {{ classObject.success ? '移除' : '添加' }}成功样式
            </button>
            <button @click="classObject.warning = !classObject.warning"
                    :class="{ active: classObject.warning }">
                {{ classObject.warning ? '移除' : '添加' }}警告样式
            </button>
            <button @click="classObject.error = !classObject.error"
                    :class="{ active: classObject.error }">
                {{ classObject.error ? '移除' : '添加' }}错误样式
            </button>
            <button @click="classObject.highlight = !classObject.highlight"
                    :class="{ active: classObject.highlight }">
                {{ classObject.highlight ? '移除' : '添加' }}高亮背景
            </button>
            <button @click="classObject.shadow = !classObject.shadow"
                    :class="{ active: classObject.shadow }">
                {{ classObject.shadow ? '移除' : '添加' }}阴影效果
            </button>
        </div>
        
        <div style="margin-top: 20px; background: #f8f9fa; padding: 15px; border-radius: 5px;">
            <p>当前对象值：</p>
            <pre style="background: white; padding: 10px; border-radius: 3px;">{{ JSON.stringify(classObject, null, 2) }}</pre>
        </div>
    </div>

    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                classObject: {
                    success: true,
                    warning: false,
                    error: false,
                    highlight: true,
                    shadow: true
                }
            }
        });
    </script>
</body>
</html>

style样式绑定

  • style="{fontSize:xxx}"其中xxx是动态值。
  • style="[a,b]"其中a、b是样式对象。

对象写法

直接绑定内联样式对象，适合需要动态计算的样式值。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Style绑定 - 对象写法</title>
    <script type="text/javascript" src="./vue.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        
        .demo-box {
            margin: 20px 0;
            padding: 30px;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        button {
            margin: 5px;
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            color: white;
        }
        
        .color-btns button {
            background: #3498db;
        }
        
        .size-btns button {
            background: #e74c3c;
        }
        
        .other-btns button {
            background: #2ecc71;
        }
        
        button:hover {
            opacity: 0.9;
        }
        
        .btn-group {
            margin: 10px 0;
        }
        
        .btn-group label {
            display: block;
            margin: 10px 0 5px 0;
            color: #666;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>Style绑定 - 对象写法</h2>
        <p>直接绑定内联样式对象</p>
        
        <!-- 示例区域 -->
        <div :style="styleObject" class="demo-box">
            通过JavaScript对象直接控制内联样式
        </div>
        
        <!-- 控制按钮 -->
        <div class="btn-group">
            <label>颜色设置：</label>
            <div class="color-btns">
                <button @click="styleObject.color = 'red'">红色文字</button>
                <button @click="styleObject.color = 'blue'">蓝色文字</button>
                <button @click="styleObject.color = 'green'">绿色文字</button>
                <button @click="styleObject.color = '#ff00ff'">紫色文字</button>
            </div>
        </div>
        
        <div class="btn-group">
            <label>背景色设置：</label>
            <div class="color-btns">
                <button @click="styleObject.backgroundColor = '#ffcccc'">浅红背景</button>
                <button @click="styleObject.backgroundColor = '#cceeff'">浅蓝背景</button>
                <button @click="styleObject.backgroundColor = '#ccffcc'">浅绿背景</button>
                <button @click="styleObject.backgroundColor = '#ffffcc'">浅黄背景</button>
            </div>
        </div>
        
        <div class="btn-group">
            <label>字体大小：</label>
            <div class="size-btns">
                <button @click="styleObject.fontSize = '16px'">16px</button>
                <button @click="styleObject.fontSize = '20px'">20px</button>
                <button @click="styleObject.fontSize = '24px'">24px</button>
                <button @click="styleObject.fontSize = '28px'">28px</button>
            </div>
        </div>
        
        <div class="btn-group">
            <label>其他样式：</label>
            <div class="other-btns">
                <button @click="styleObject.fontWeight = styleObject.fontWeight === 'bold' ? 'normal' : 'bold'">
                    {{ styleObject.fontWeight === 'bold' ? '取消加粗' : '设为加粗' }}
                </button>
                <button @click="styleObject.textAlign = styleObject.textAlign === 'center' ? 'left' : 'center'">
                    {{ styleObject.textAlign === 'center' ? '取消居中' : '设为居中' }}
                </button>
                <button @click="styleObject.opacity = styleObject.opacity === '0.8' ? '1' : '0.8'">
                    {{ styleObject.opacity === '0.8' ? '取消半透明' : '设为半透明' }}
                </button>
            </div>
        </div>
        
        <div style="margin-top: 20px; background: #f8f9fa; padding: 15px; border-radius: 5px;">
            <p>当前样式对象：</p>
            <pre style="background: white; padding: 10px; border-radius: 3px; overflow-x: auto;">{{ JSON.stringify(styleObject, null, 2) }}</pre>
        </div>
    </div>

    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                styleObject: {
                    color: 'blue',
                    backgroundColor: '#f0f8ff',
                    fontSize: '18px',
                    padding: '20px',
                    borderRadius: '10px',
                    fontWeight: 'normal',
                    textAlign: 'left',
                    opacity: '1',
                    border: '2px solid #ddd'
                }
            }
        });
    </script>
</body>
</html>

数组写法

合并多个样式对象，数组后面的样式会覆盖前面的相同属性。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Style绑定 - 数组写法</title>
    <script type="text/javascript" src="./vue.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        
        .demo-box {
            margin: 20px 0;
            padding: 30px;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        button {
            margin: 5px;
            padding: 8px 16px;
            background: #e67e22;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        button:hover {
            background: #d35400;
        }
        
        .style-section {
            background: #f8f9fa;
            padding: 15px;
            margin: 15px 0;
            border-radius: 5px;
        }
        
        h3 {
            color: #333;
            margin-top: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>Style绑定 - 数组写法</h2>
        <p>合并多个样式对象</p>
        
        <!-- 示例区域 -->
        <div :style="[baseStyle, overrideStyle]" class="demo-box">
            基础样式 + 覆盖样式 = 最终效果
        </div>
        
        <!-- 样式展示 -->
        <div class="style-section">
            <h3>基础样式（固定不变）：</h3>
            <pre>{{ JSON.stringify(baseStyle, null, 2) }}</pre>
        </div>
        
        <div class="style-section">
            <h3>覆盖样式（可以动态修改）：</h3>
            <pre>{{ JSON.stringify(overrideStyle, null, 2) }}</pre>
        </div>
        
        <!-- 控制按钮 -->
        <div>
            <p>选择覆盖样式：</p>
            <button @click="overrideStyle = { color: 'red', fontWeight: 'bold' }">
                红色加粗
            </button>
            <button @click="overrideStyle = { backgroundColor: '#ffcc00', color: '#333', border: '3px solid #ff9900' }">
                黄色主题
            </button>
            <button @click="overrideStyle = { backgroundColor: '#663399', color: 'white', transform: 'rotate(2deg)' }">
                紫色旋转
            </button>
            <button @click="overrideStyle = { textShadow: '2px 2px 4px rgba(0,0,0,0.3)', letterSpacing: '2px' }">
                文字特效
            </button>
            <button @click="overrideStyle = {}">
                清除覆盖样式
            </button>
        </div>
        
        <div style="margin-top: 20px; padding: 15px; background: #e8f4f8; border-radius: 5px;">
            <p><strong>注意：</strong>数组后面的样式对象会覆盖前面样式对象的相同属性。</p>
            <p>最终样式 = baseStyle + overrideStyle（后者优先级更高）</p>
        </div>
    </div>

    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                baseStyle: {
                    padding: '25px',
                    margin: '10px 0',
                    backgroundColor: '#f0f8ff',
                    border: '2px solid #3498db',
                    borderRadius: '12px',
                    fontSize: '18px',
                    transition: 'all 0.3s ease'
                },
                overrideStyle: {
                    color: '#e74c3c',
                    fontWeight: 'bold'
                }
            }
        });
    </script>
</body>
</html>

总结

Vue的样式绑定系统提供了强大的灵活性，但真正的艺术在于知道何时使用何种方式 。记住：Class绑定是你的常规武器 ，用于日常的样式管理；Style绑定是你的特种武器，用于解决特定的、需要动态计算的问题。

通过合理运用这两种方式，你可以创建出既美观又高性能的Vue应用。最重要的是，始终保持代码的可维护性和可读性，这样你的样式系统才能随着应用的增长而持续演进。

相关推荐
翻斗花园岭第一爆破手2 小时前
flutter3.Container中的decoration
开发语言·前端·javascript
IT_陈寒2 小时前
Java 21虚拟线程实战：7个性能翻倍的异步重构案例与避坑指南
前端·人工智能·后端
翻斗花园岭第一爆破手2 小时前
flutter2：Container的简介与尺寸
java·服务器·前端
倔强的小石头_2 小时前
Python 从入门到实战（十四）：Flask 用户认证（给 Web 应用加安全锁，区分管理员与普通用户）
前端·python·flask
be or not to be2 小时前
前端基础实战笔记：文档流 + 盒子模型
前端·笔记
程序员码歌2 小时前
短思考第264天，每天复盘5分钟，胜过你盲目努力1整年（2）
前端·后端·ai编程
nono牛2 小时前
实战项目：设计一个智能温控服务
android·前端·网络·算法
敲敲了个代码9 小时前
从硬编码到 Schema 推断：前端表单开发的工程化转型
前端·javascript·vue.js·学习·面试·职场和发展·前端框架
dly_blog11 小时前
Vue 响应式陷阱与解决方案(第19节)
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点023D 圣诞树网页代码03从快手“12·22”直播攻击事件看：一次教科书式的业务层饱和攻击04UV安装并设置国内源05Gemini3 生成的基于手势控制3D粒子圣诞树06Linux下V2Ray安装配置指南07在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）08解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题09开源分享 | 超浪漫 3D 圣诞树立体动画（附零基础使用教程）10GLM-4.7 vs MiniMax-M2.1：代码工程理解