Vue与class和style

最新推荐文章于 2025-03-15 07:30:00 发布

我会努力变强的

最新推荐文章于 2025-03-15 07:30:00 发布

阅读量490

点赞数

分类专栏： JavaScript 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_40837310/article/details/122814585

版权

JavaScript 专栏收录该内容

38 篇文章

订阅专栏

本文详细介绍了在Vue中如何动态地绑定class和样式。通过三种方法——属性名方式、数组方式和对象方式，展示了如何根据需求切换和组合不同的CSS类。同时，还演示了如何使用内联样式来改变元素的样式。示例代码中包含按钮点击事件，用于切换不同的样式状态，提供了一种灵活的前端开发实践。

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

简介

这篇文章主要介绍如何在vue中绑定class和样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue与css</title>
    <style>
    
        .basic{
            height: 200px;
            margin-bottom: 10px;
            margin-top: 10px;
            background-color: grey;
        }
        .happyMood{
            background-color: pink;
        }
        .sadMood{
            background-color: black;
        }
        .nomalMood{
            background-color: green;
        }
        .c1{
            background-color: black; 
        }
        .c2{
            height: 400px;
        }
        .c3{
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="root">
        <!-- 创建三个div，默认有basic类，然后展示三种不同绑定样式的方法 -->
        <!-- 第一种使用属性名的方式指定，这样的情况适用于该元素的绑定的动态类只有一个，但是类名不确定的情况。 -->
        <div class="basic" :class="mood"></div>
        <button @click="changeMood">随机切换心情</button>
        <!-- 第二种方式是使用数组的方式，适用于绑定的类的个数不确定，名字也不确定 -->
        <div class="basic" :class="cArr"></div>
        <button @click="m1">使用背景色为黑色和椭圆形</button>
        <button  @click="m2">使用背景色为黑色和加大高度</button>
        <button  @click="m3">使用背景色为黑色和圆形和加大高度</button>
        <!-- 第三种方式是使用对象的方式，适用于数量确定，名字确定，但是是否使用不确定 -->
        <div class="basic" :class="cObj"></div>
        <button @click="m4">使用背景色为黑色</button>
        <button @click="m5">取消背景色为黑色</button>
        <button  @click="m6">使用椭圆形</button>
        <button  @click="m7">取消椭圆形</button>
        <button  @click="m8">使用加大高度</button>
        <button  @click="m9">取消加大高度</button>

        <!-- 这个说明vue使用style内联样式 -->
        <div class="basic" :style="styleObj"></div>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el:"#root",
            data:{
                mood:"",
                moodNameArray:["happyMood","sadMood","nomalMood"],
                cArr:[],
                c1:"c1",
                c2:"c2",
                c3:"c3",
                cObj:{
                    //属性名是类名，值是true（使用）false（不使用）
                    c1:false,
                    c2:false,
                    c3:false
                },
                styleObj:{
                    //属性名是样式名，属性值是样式值
                    //椭圆加边框
                    "border-radius": "50%",
                    "border":" black solid 5px"
                }
            },
            methods: {
                changeMood(){
                    //获取0-2的随机整数
                    let index = Math.round(Math.random()*2+0);
                    this.mood = this.moodNameArray[index];
                
                },
                m1(){
                    this.cArr = ["c1","c3"];
                },
                m2(){
                    this.cArr = ["c1","c2"];
                },
                m3(){
                    this.cArr = ["c1","c2","c3"];
                },
                m4(){
                    this.cObj.c1 = true;
                },
                m5(){
                    this.cObj.c1 = false;
                },
                m6(){
                    this.cObj.c3 = true;
                },
                m7(){
                    this.cObj.c3 = false;
                },
                m8(){
                    this.cObj.c2 = true;
                },
                m9(){
                    this.cObj.c2 = false;
                },
            },
        })
    </script>
</body>
</html>

效果可以复制代码自行验证