Vue.js框架学习—绑定class样式

发布于:2022-10-21 ⋅ 阅读:(349) ⋅ 点赞:(0)

在这里插入图片描述

一、字符串写法

适用于样式的类名不确定,需要动态指定的情况。

style样式

<style>
    .basic{
        width: 400px;
        height: 100px;
        border: 1px solid black;
    }
    .red{
        background-color: red;
    }
    .green{
        background-color: green;
    }
</style>

模板和Vue实例

<body>
    <div id="root">
        <div class="basic" :class="color" @click="change">{{name}}</div>
    </div>
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            name:'绑定class样式-字符串写法',
            color:'red'
        },
        methods: {
            change(){
                if(this.color=='red'){
                    this.color='green'
                }else{
                    this.color='red'
                }
            }
        },
    })
</script>

案例效果

点击容器,会修改容器的背景色。
在这里插入图片描述

二、数组写法

适用于要绑定的样式个数不确定、名字也不确定的情况。

style样式

<style>
    .basic{
        width: 400px;
        height: 100px;
        background-color: red;
    }
    .border{
        border: 4px dashed rgb(2, 197, 2);
    }
    .radius{
        border-radius: 20px;
    }
</style>

模板和Vue实例

<body>
    <div id="root">
        <div :class="classArr">{{name}}</div>
    </div>
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            name:'绑定class样式-数组写法',
            classArr:['basic','border','radius']
        }
    })
</script>

案例效果

可以同时绑定数量不等的样式。
在这里插入图片描述

三、对象写法

适用于要绑定的样式个数确定、名字也确定,但要动态决定用不用。

style样式

<style>
    .basic{
        width: 400px;
        height: 100px;
        background-color: red;
    }
    .border{
        border: 4px dashed rgb(2, 197, 2);
    }
    .radius{
        border-radius: 20px;
    }
</style>

模板和Vue实例

<body>
    <div id="root">
        <div class="basic" :class="classObj">{{name}}</div>
    </div>
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            name:'绑定class样式-数组写法',
            classObj:{
                border:true,
                radius:true
            }
        },
    })
</script>

案例效果

通过对象的方式,可以绑定多个样式,同时动态用不用样式。
在这里插入图片描述


网站公告

今日签到

点亮在社区的每一天
去签到