react

绑定HTML Class

在react中秉持的原则是：只能传递一个字符串作为className属性。

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu--active';
  }
  return <span className={className}>Menu</span>
}

提示

如果经常动态更新className，可以使用classnames的package来简化这一过程

绑定内联样式

react的内联样式style接受一个采用小驼峰命名属性的Javascript对象，动态绑定时，属性值可以依赖组件的props或者state，例如：

function MyComponent() {
  const num = 10;
  return <span style={{ width: num, backgroundColor: 'red' }}></span>
}

vue

绑定HTML Class

data如下：

data() {
  return {
    isActive: true,
    hasError: false
  }
}

1. 对象语法

   和react类似，是个对象，只不过react要表达对象需要再加层{}

   <div
     class="static"
     :class="{ active: isActive, 'text-danger': hasError }"
   ></div>
   

   :class 指令也可以与普通的 class attribute 共存

2. 数组语法

   最后数组类型为Array<string>

   <div :class="[isActive ? activeClass : '', 'errorClass']"></div>
   

绑定内联样式

data如下

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

1. 对象语法

   这个跟react的内联语法一致，都是对象，不同于react的是，属性可以用短横线分割（kebab-case）

   <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
   

2. 数组语法

   最后数组类型为Array<Record<string, string|number>>

   <div :style="[{ color: activeColor }, { fontSize: fontSize + 'px' }]"></div>
   

内联样式vue是可以自动添加前缀的，react不能。

微信小程序

小程序中数据绑定使用 Mustache 语法（双大括号）将变量包起来，所以小程序的class、style中遇到变量用{{}}包裹就可以

data如下

data: {
  isActive: true,
  fontSize: 30
}

绑定HTML Class

<view class="static {{ isActive && 'active' }}"></view>

绑定内联样式

<view style="font-size: {{ fontSize + 'rpx' }}"></view>