vue2[初级] 样式属性class与style的绑定_vue2中控制class属性-优快云博客

本文链接：https://blog.youkuaiyun.com/u011664286/article/details/126978653

本文介绍了Vue中的样式绑定方法，包括单个class样式绑定、多个class样式绑定及内联样式绑定等，通过实例演示如何动态控制元素样式。

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

本节内容

class样式绑定与style样式绑定

绑定使用v-bind:需要绑定的属性或事件可以简写成:需要绑定的属性或事件

class样式与style样式绑定都是动态的方便控制页面元素展示效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .aClass{
            color:red;
        }
        .bClass{
            color:green;
        }
        .cClass{
            font-size: 30px;
        }
    </style>
</head>
<body>
<div id="app">

    <hr>
    <h2>class样式绑定</h2>
    <!--
    原生的class样式 直接引用style中的样式
    -->
    <p class="aClass">class样式绑定</p>
    <!--
    vue中class样式绑定 :class是v-bind:class的简写
    其中a是变量 用来动态指定class样式
    -->
    <p :class="a">class样式绑定</p>
    <button @click="change">修改</button>
    <hr>
    <h2>多种class样式绑定</h2>
    <!--
    原生的class样式 直接引用style中的样式
    -->
    <p class="aClass cClass">多种样式class属性绑定</p>
    <!--
       vue中多种样式绑定时使用单个大括号并且使用逗号隔开
       data中添加isA和isB的值 动态改变可以用方法来动态改变选取的样式
     -->
    <p :class="{aClass:isA,cClass:isB}">多种样式class属性绑定</p>
    <button @click="change2">修改</button>

    <hr>
    <h2>style内联样式绑定</h2>
    <!--
    原生内联样式
    -->
    <p style="color: #b300ff;font-size: 30px;">内联样式绑定</p>
    <!--
    vue中style的内联样式绑定
    -->
    <p :style="{color:activeColor222,fontSize:fontSize22+'px'}">内联样式绑定</p>
    <button @click="change3">修改</button>
</div>

<script type="text/javascript" src="../js/vue2.6.js"></script>
<script type="text/javascript">
    let count=0;
    new Vue({
        el:'#app',
        data:{
            a:'aClass', // 这里指定style中的样式表
            isA:true,
            isB:true,
            activeColor222:'red',
            fontSize22:30
        },
        methods:{
            change(){
                //this.a='bClass' // 这里是动态改变style中的样式表
                this.a = (this.a=='aClass'?'bClass':'aClass');// 动态切换不同的class样式
            },
            change2(){ // 多种样式绑定
                this.isB=(this.isB==true?false:true);
            },
            change3(){
                this.activeColor222='green';
                this.fontSize22=20;
            }
        }
    });
</script>
</body>
</html>