vue js的样式绑定

本文介绍了如何在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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值