如何在amp-bind中包含多个动态类？

嘿，这个问题我太熟啦！在amp-bind里实现多个动态类的绑定其实没那么复杂，核心就是利用字符串拼接或者数组处理的思路，下面给你两种实用的方法，附具体代码示例：

这种方法直接通过字符串拼接来组合多个动态类，还能和静态类一起混用。需要注意给每个动态类前后加空格，避免类名连在一起失效，也可以用trim()去掉多余空格：

<!-- 先引入amp-bind组件 -->
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

<!-- 绑定多个动态类的元素 -->
<div 
  [class]="('static-box ' + (isActive ? 'active' : '') + ' ' + (isHighlighted ? 'highlighted' : '')).trim()"
  on="tap:AMP.setState({isActive: !isActive, isHighlighted: !isHighlighted})"
>
  点击我切换状态
</div>

这里的isActive和isHighlighted是amp-bind的状态变量，点击元素时会切换它们的布尔值，进而动态添加/移除对应的类。trim()方法会自动去掉字符串首尾的多余空格，避免出现无效的空类名。

这种方法更优雅，用数组来收集所有要应用的类，再通过filter(Boolean)过滤掉空值，最后用join(' ')转成空格分隔的类名字符串：

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

<div 
  [class]="['static-box', isActive ? 'active' : '', isHighlighted ? 'highlighted' : ''].filter(Boolean).join(' ')"
  on="tap:AMP.setState({isActive: !isActive, isHighlighted: !isHighlighted})"
>
  点击我切换状态
</div>

filter(Boolean)会自动移除数组里的空字符串、false这些假值，最后join(' ')把数组转成符合类名格式的字符串，完全不用担心多余空格的问题，代码也更清晰。

小提示 #

• 不管用哪种方法，都要确保页面已经引入了amp-bind组件，否则绑定逻辑不会生效
• 状态变量的初始化可以通过amp-bind的initial-state来设置，比如在<body>标签加data-amp-bind-initial-state='{"isActive": false, "isHighlighted": false}'，这样页面加载时就有初始状态了

这样就能轻松实现多个动态类的绑定啦，试一下应该就能搞定～

内容的提问来源于stack exchange，提问作者teknova