vue js的样式绑定_vue里面样式js绑定到data-优快云博客

本文链接：https://blog.youkuaiyun.com/PCthedream/article/details/127433197

本文介绍了如何在Vue.js中使用v-bind:class和v-bind:style进行动态样式绑定。通过示例代码展示了如何根据数据属性切换class，并通过计算属性返回对象来控制样式。同时，演示了如何绑定对象到style属性，实现动态设置元素的内联样式，包括颜色和字体大小。文章还提供了点击按钮改变背景颜色的交互效果。

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

class的样式绑定

我们可以为 v-bind:class 设置一个对象，从而动态的切换 class:

:class="{‘属性名’：‘属性值’}" 属性名就是生效的类名值为布尔值，true生效，false不生效
直接绑定一个对象 :class=“aa” aa 是data中的一个属性： aa:{“blue”:true,“big”:false}
也可以通过计算属性返回一个对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
        }
        .bg{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 想要动态的设置class，也是要给一个对象 -->
        <!-- 属性名就是类名 -->
        <!-- 属性值：就是布尔值。如果为true就代表有这个类名；false就代表没有 -->
        <div class="box " :class="{bg:isb}"></div>
        点击按钮会改变div的背景颜色
        <button @click="yell">点击</button>
    </div>
    <script src="/vue.js"></script>
    <script>
        
        new Vue({
            el:'#app',
            data:{
                isb:false,
                if:0
            },
            methods: {
                yell(){
                    if(this.if==0){
                        this.isb=true
                        this.if=1
                    } else{
                        this.isb=false
                        this.if=0
                    }
                  
        
                }
            },
        })
    </script>
</body>
</html>

style属性的绑定

在行内属性中书写样式

<div style="color:red;font-size:48px"> div</div>

把行内属性改成对象，以对象方式绑定style属性

外部增加（）：属性值改造成字符串；分高改造成逗号；属性名到对象名的改变

要遵守驼峰命名法

<div v-bind:style="{color:'red',fontSize:'48px'}"> div</div>

把属性值改成变量

第一个color是属性名第二个color是变量名和data中保持一致

<div v-bind:style="{color:color,fontSize:size}"> div</div>
<script>
        new Vue({
            el: '#app',
            data: {
                color:'red',
                size:'68px'
            }
        })

    </script>