Vue—动态绑定class和style

格斗家不爱在外太空沉思
727 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情

绑定Class的几种方式

在vue中，v-bind的主要用法是动态更新HTML元素上的属性，在数据绑定中，v-bind最常见的两个应用就是元素的样式名称class和内联样式style的动态绑定

对象语法

使用v-bind给class设置一个对象，可以动态切换class

<style>
    .active{
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<body>
    <div id="app">
        <div :class="{'active':active}"></div>
        <button @click="change">切换</button>
    </div>

    <script src="./vue.js"></script>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                active:true
            },
            methods: {
                change(){
                    this.active=!this.active
                }
            },
        })
    </script>
</body>

6f702e2c-e0cc-4e83-8da0-f094ef7fe2a7.gif

可以在对象中可以传入多个属性动态切换class，而且class可以和:class共存

<style>
        .active{
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .test{
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>
<body>
    <div id="app">
        <div :class="{'active':active,'test':test}"></div>
        <button @click="change">切换</button>
    </div>

    <script src="./vue.js"></script>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                active:true,
                test:false
            },
            methods: {
                change(){
                    this.active=!this.active
                    this.test=!this.test
                }
            },
        })
    </script>
</body>

07d6f7b0-6f8e-4443-86bb-b4d6f718a8c3.gif

数组语法

当需要应用多个class时，可以使用数组语法，给:class绑定一个数组，应用一个class列表

<style>
    .active{
        width: 100px;
        height: 100px;
    }
    .test{
        background-color: pink;
    } 
</style>
<body>
    <div id="app">
        <div :class="[active,test]"></div>
    </div>

    <script src="./vue.js"></script>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                active:'active',
                test:'test'
            },
        })
    </script>
</body>

image.png

使用计算属性给元素动态设置类名，在业务中经常用到，尤其是在写复用的组件时，所以在开发过程中，如果表达式较长或逻辑复杂，应该尽可能地优先使用计算属性

在组件中使用

如果直接在自定义组件上使用class或:class，样式规则会直接应用到这个组件的根元素上

Vue.component('my-component', {
    template: `<p class="article">一些文本</p>` 
});

然后在调用这个组件时，应用对象语法或数组语法给组件绑定class

<div id="app"> 
    <my-component :class="{'active':isActive}"></my-component> 
</div>

但是这种用法仅适用于自定义组件的最外层是一个根元素，否则会无效。当不满足这种条件或需要给具体的子元素设置类名时，应当使用组件的props来传递

绑定内联样式

使用:style可以给元素绑定内联样式，方法与:class类似，也有对象语法和数组语法，像直接在元素上写CSS

<div id="app"> 
    <div :style="{'color':color, 'fontSize':fontSize+'px'}">aaaaaaaa</div>
</div>
new Vue({ 
    el: "#app", 
    data: { color: 'red', fontSize: 50 }
});

image.png

但在实际业务中，:style的数组语法并不常用，可以写在一个对象里面，而较为常用的是计算属性,使用:style时，Vue.js会自动给特殊的CSS属性名称增加前缀，如transform

注意

1.属性名带-的都要写成驼峰式，如background-color改为backgroundColor

2.除了绑定值，其他的属性名的值要用引号括起来，比如color:'#ff0000'而不是 color:#ff0000

avatar
文章
阅读
粉丝