E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

小程序最近在做些小程序转Vue相关的工作,里面有不少涉及到style和class绑定的,为了不至于用乱,我把小程序和Vue绑定方式都罗列了一下。小程序里面的class与style绑定,遵循HTML特性绑定,有关于HTML绑定,我在上一篇文章中有总结过,可点击查看。在进行class与style绑定时,可以直接绑定,也可以带上逻辑与,或者三元运算进行条件控制JSdata: {    dClass: ‘my-class’,    dClass1: ‘my-class1’,    dClass2: ‘my-class2’,    dClass3: ‘my-class3’,    dStyle: ‘color:red;’}WXMLview class=”{{dClass}}”/viewview class=”{{truthy ? dClass1 : dClass2}}”/viewview class=”{{truthy && dClass3}}”/viewview style=”{{dStyle}}”/view复制代码Vue在Vue里面,class与style绑定同样遵循着HTML绑定,我们只需要通过表达式计算出字符串即可,表达式结果的类型除了字符串之外,还可以是对象和数组。绑定class字符串类型JSdata() {    return {        dClass: ‘my-class’    }}HTMLdiv :class=”dClass”/div复制代码对象语法JSdata() {    return {        showC1: true,        showC2: true,        showC3: true    }}HTMLdiv :class=”{class1: showC1}”/divdiv :class=”{‘class-2’: showC2, ‘class-3’: showC3}”/div复制代码:class指令可以与普通的class属性共存,如果你打算无论如何都要添加一个class,放置到普通的class属性中即可,比如:JSdata() {    return {        showC1: true    }}HTMLdiv class=”static” :class=”{class1: showC1}”/div复制代码绑定的数据可以直接定义在data里面,比如:JSdata() {    return {        classObj: {            ‘class-1’: true,            ‘class-2’: false,            ‘class-3’: true        }    }}HTMLdiv :class=”classObj”/div复制代码绑定一个返回对象的计算属性,比如:JSdata() {    return {        classObj: {            ‘class-1’: true,            ‘class-2’: false        }    }}HTMLdiv :class=”classObj”/div复制代码数组语法JSdata() {    return {        activeClass: ‘active’,        errorClass: ‘error’    }}HTMLdiv :class=”[activeClass, errorClass]”/div复制代码使用三元表达式切换列表中的class,比如:JSdata() {    return {        showC1: true    }}HTMLdiv :class=”[showC1 ? ‘class-1’ : ”]”/div复制代码总是添加一个class:JSdata() {    return {        showC1: true    }}HTMLdiv :class=”[showC1 ? ‘class-1’ : ”, ‘class-2’]”/div复制代码在数组中使用对象语法:JSdata() {    return {        showC1: true    }}HTMLdiv :class=”[{‘class-1’: showC1}, ‘class-2’]”/div复制代码绑定内联样式,即style对象语法:JSdata() {    return {        activeColor: ‘red’,        fontSize: 30    }}HTMLdiv :style=”{color: activeColor, fontSize: fontSize + ‘px’}”/div复制代码直接绑定一个样式对象,CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用单引号括起来) 来命名:JSdata() {    return {        styleObj: {            ‘background-color’: ‘red’,            fontSize: ’30px’        }    }}HTMLdiv :style=”styleObj”/div复制代码使用数组语法绑定多个样式对象:JSdata() {    return {        selfObj: {            width: ‘100px’,            height: ’50px’        },        childObj: {            backgroundColor: ‘red’,            ‘font-size’: ’30px’        }    }}HTMLdiv :style=”[selfObj, childObj]”/div复制代码

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序与Vue对比class与style绑定
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏