小程序与Vue对比·class与style绑定

￡神魔★判官ぃ 2022-01-20 06:13 220阅读 0赞

#### 小程序 ####

最近在做些小程序转Vue相关的工作，里面有不少涉及到style和class绑定的，为了不至于用乱，我把小程序和Vue绑定方式都罗列了一下。  
小程序里面的class与style绑定，遵循HTML特性绑定，有关于HTML绑定，我在上一篇文章中有总结过，可[点击查看][Link 1]。在进行class与style绑定时，可以直接绑定，也可以带上逻辑与，或者三元运算进行条件控制

JS
    data: {
        dClass: 'my-class',
        dClass1: 'my-class1',
        dClass2: 'my-class2',
        dClass3: 'my-class3',
        dStyle: 'color:red;'
    }
    
    WXML
    <view class="{ {dClass}}"></view>
    <view class="{ {truthy ? dClass1 : dClass2}}"></view>
    <view class="{ {truthy && dClass3}}"></view>
    <view style="{ {dStyle}}"></view>
    复制代码

#### Vue ####

在Vue里面，class与style绑定同样遵循着HTML绑定，我们只需要通过表达式计算出字符串即可,表达式结果的类型除了字符串之外，还可以是对象和数组。

##### 绑定class #####

###### 字符串类型 ######

JS
    data() {
        return {
            dClass: 'my-class'
        }
    }
    
    HTML
    <div :class="dClass"></div>
    复制代码

###### 对象语法 ######

JS
    data() {
        return {
            showC1: true,
            showC2: true,
            showC3: true
        }
    }
    
    HTML
    <div :class="{class1: showC1}"></div>
    <div :class="{'class-2': showC2, 'class-3': showC3}"></div>
    复制代码

:class指令可以与普通的class属性共存，如果你打算无论如何都要添加一个class，放置到普通的class属性中即可，比如：

JS
    data() {
        return {
            showC1: true
        }
    }
    
    HTML
    <div class="static" :class="{class1: showC1}"></div>
    复制代码

绑定的数据可以直接定义在data里面，比如：

JS
    data() {
        return {
            classObj: {
                'class-1': true,
                'class-2': false,
                'class-3': true
            }
        }
    }
    
    HTML
    <div :class="classObj"></div>
    复制代码

绑定一个返回对象的计算属性，比如：

JS
    data() {
        return {
            classObj: {
                'class-1': true,
                'class-2': false
            }
        }
    }
    
    HTML
    <div :class="classObj"></div>
    复制代码

###### 数组语法 ######

JS
    data() {
        return {
            activeClass: 'active',
            errorClass: 'error'
        }
    }
    
    HTML
    <div :class="[activeClass, errorClass]"></div>
    复制代码

使用三元表达式切换列表中的class，比如：

JS
    data() {
        return {
            showC1: true
        }
    }
    
    HTML
    <div :class="[showC1 ? 'class-1' : '']"></div>
    复制代码

总是添加一个class：

JS
    data() {
        return {
            showC1: true
        }
    }
    
    HTML
    <div :class="[showC1 ? 'class-1' : '', 'class-2']"></div>
    复制代码

在数组中使用对象语法：

JS
    data() {
        return {
            showC1: true
        }
    }
    
    HTML
    <div :class="[{'class-1': showC1}, 'class-2']"></div>
    复制代码

##### 绑定内联样式，即style #####

###### 对象语法： ######

JS
    data() {
        return {
            activeColor: 'red',
            fontSize: 30
        }
    }
    
    HTML
    <div :style="{color: activeColor, fontSize: fontSize + 'px'}"></div>
    复制代码

直接绑定一个样式对象，CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：

JS
    data() {
        return {
            styleObj: {
                'background-color': 'red',
                fontSize: '30px'
            }
        }
    }
    
    HTML
    <div :style="styleObj"></div>
    复制代码

###### 使用数组语法绑定多个样式对象： ######

JS
    data() {
        return {
            selfObj: {
                width: '100px',
                height: '50px'
            },
            childObj: {
                backgroundColor: 'red',
                'font-size': '30px'
            }
        }
    }
    
    HTML
    <div :style="[selfObj, childObj]"></div>
    复制代码

[Link 1]: https://juejin.im/post/5c15c376e51d45485a098e60