Vue学习（二）：class与style绑定

最新推荐文章于 2025-09-11 10:42:34 发布

转载最新推荐文章于 2025-09-11 10:42:34 发布 · 88 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Jimc/p/10100961.html

文章标签：

#xhtml #javascript #ViewUI

本文详细介绍了Vue.js中如何使用v-bind指令进行类名和内联样式的动态绑定，包括对象语法和数组语法的使用方法，并通过具体示例展示了如何在实际项目中应用这些技术。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>class与style绑定</title>
    <style type="text/css">
        .static {
            font-weight: bold;
        }

        .class-a {
            color: blue;
        }

        .class-b {
            font-size: 22px;
        }
    </style>
</head>
<body>
<!--1.绑定 HTML Class-->
<!--对象语法-->
<div id="example1" class="static" v-bind:class="{'class-a': isA, 'class-b': isB}">Hello Vue.</div>
<!--数组语法-->
<div id="example2" class="static" v-bind:class="[classA, classB]">Hello Vue.</div>
<div id="example3" class="static" v-bind:class="[classA, isB ? classB : '']">Hello Vue.</div>

<!--2.绑定内联样式-->
<!--对象语法-->
<div id="example4" class="static" v-bind:style="{color: activeColor, 'font-size': fontSize + 'px'}">Hello Vue.</div>
<div id="example5" class="static" v-bind:style="styleObject">Hello Vue.</div>
<!--数组语法-->
<div id="example6" class="static" v-bind:style="[styleObjectA, styleObjectB]">Hello Vue.</div>
<script type="text/javascript" src="vue.min.js"></script>
<script>
    // example 1
    let vm1 = new Vue({
        el: '#example1',
        data: {
            isA: true,
            isB: false
        }
    });
    console.log(vm1.$el);

    // example 2
    let vm2 = new Vue({
        el: '#example2',
        data: {
            classA: 'class-a',
            classB: 'class-b'
        }
    });
    console.log(vm2.$el);

    // example 3
    let vm3 = new Vue({
        el: '#example3',
        data: {
            classA: 'class-a',
            classB: 'class-b',
            isB: false
        }
    });
    console.log(vm3.$el);

    // example 4
    let vm4 = new Vue({
        el: '#example4',
        data: {
            activeColor: 'red',
            fontSize: '30'
        }
    });
    console.log(vm4.$el);

    // example 5
    let vm5 = new Vue({
        el: '#example5',
        data: {
            styleObject: {
                color: 'red',
                fontSize: '25px'
            }
        }
    });
    console.log(vm5.$el);

    // example 6
    let vm6 = new Vue({
        el: '#example6',
        data: {
            styleObjectA: {
                color: 'blue',
                fontSize: '35px'
            },
            styleObjectB: {
                'text-decoration': 'underline'
            }
        }
    });
    console.log(vm6.$el);
</script>
</body>
</html>