Vue学习笔记5：Class与Style绑定_vue class 转style-CSDN博客

本文链接：https://blog.csdn.net/lj402159806/article/details/122830265

本文详细介绍了如何在Vue应用中通过v-bind:class和v-bind:style灵活地为HTML元素绑定动态类和内联样式。实例演示了对象、数组和计算属性的使用，适合前端开发者理解和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Class与Style绑定

绑定HTML Class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定HTML Class</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .text {
            font-size: 30px
        }

        .active {
            background: red;
        }

        .green {
            color: #00ff00;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- v-bind:class可以接收对象来动态切换class -->
    <!-- 当对象中isActive与isGreen都为true时 -->
    <!-- 会渲染为class='text active green' -->
    <div class='text'
         v-bind:class="{active: isActive, green: isGreen}"
         style="width:200px; height:200px;text-align: center; line-height: 200px;">
        hi vue1
    </div>
    <!-- 使用对象语法渲染 -->
    <!-- 可以结合计算属性使用 -->
    <div class='text'
         v-bind:class="classObject"
         style="width:200px; height:200px;text-align: center; line-height: 200px;">
        hi vue2
    </div>
    <!-- 使用数组语法渲染 -->
    <!-- 可以使用三目表达式 -->
    <div class='text'
         v-bind:class="[ isActive? activeClass: '', greenClass]"
         style="width:200px; height:200px;text-align: center; line-height: 200px;">
        hi vue3
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isActive: true,
            isGreen: true,
            activeClass: 'active',
            greenClass: 'green'
        },
        computed: {
            classObject: function () {
                return {
                    active: this.isActive,
                    green: this.isGreen
                }
            }
        }
    })
</script>
</html>

在这里插入图片描述

绑定内联样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定内联样式</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app1">
    <!-- v-bind:style语法非常像CSS 实际是JavaScript对象 -->
    <!-- property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，用引号括起来) 来命名 -->
    <div v-bind:style="{color:color, fontSize:size, background: isRed ? '#FF0000' : ''}">
        hi vue1
    </div>
    <!-- 使用对象语法渲染 -->
    <!-- 可以结合计算属性使用 -->
    <div v-bind:style="styleObject">
        hi vue2
    </div>
    <!-- 使用数组语法渲染 -->
    <div v-bind:style="[styleObject, styleObject2]">
        hi vue3
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#app1",
        data: {
            color: "#FFFFFF",
            size: '50px',
            isRed: true,
            styleObject: {
                color: 'red',
                fontSize: '33px'
            },
            styleObject2: {
                background: 'blue'
            }
        }
    })
</script>
</body>
</html>