vue学习(八) 通过类名和style绑定样式

最新推荐文章于 2025-02-17 15:12:51 发布

原创最新推荐文章于 2025-02-17 15:12:51 发布 · 294 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#样式

vue.js 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了在Vue框架中如何使用类名绑定和内联样式绑定来改变元素的样式，展示了通过v-bind指令实现动态样式的灵活性。通过实例，读者可以了解到如何在用户交互时动态切换元素的颜色。

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

**通过类名绑定**
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../vue/vue.js"></script>
    <title>学习vue</title>
    <style>
        .activated {
            color: pink;
        }
    </style>
</head>

<body>
    <div id="app">
        <div @click='handleDivClick' :class='{activated : isactivated}'>Hello 周静</div>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                isactivated: false
            },
            methods: {
                handleDivClick: function() {
                    this.isactivated = !this.isactivated
                }
            },
        })
    </script>
</body>

</html>

通过style绑定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../vue/vue.js"></script>
    <title>学习vue</title>
    <style>
        .activated {
            color: pink;
        }
    </style>
</head>

<body>
    <div id="app">
        <div :style='styleObj' @click='handleDivClick'>Hello 周静</div>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                styleObj: {
                    color: 'black'
                }
            },
            methods: {
                handleDivClick: function() {
                    this.styleObj.color = this.styleObj.color === 'black' ? 'red' : 'black';
                }
            },
        })
    </script>
</body>

</html>