小程序
最近在做些小程序转Vue相关的工作,里面有不少涉及到style和class绑定的,为了不至于用乱,我把小程序和Vue绑定方式都罗列了一下。
小程序里面的class与style绑定,遵循HTML特性绑定,有关于HTML绑定,我在上一篇文章中有总结过,可点击查看。在进行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>
复制代码