diff --git a/packages/shared/src/template.ts b/packages/shared/src/template.ts
index 35f6b7950370..7a884a9ac59c 100644
--- a/packages/shared/src/template.ts
+++ b/packages/shared/src/template.ts
@@ -216,6 +216,8 @@ export class BaseTemplate {
           value = `:${value}`
         }
         return str + `bind${value}="eh" `
+      } else if (attr === 'class') {
+        return str + `class="{{i.${Shortcuts.Class}}}" `
       }
 
       return str + `${attr}="{{i.${toCamelCase(attr)}}}" `
diff --git a/packages/taro-runtime/src/dom/element.ts b/packages/taro-runtime/src/dom/element.ts
index 1f93e51e83f0..6a1579a22c24 100644
--- a/packages/taro-runtime/src/dom/element.ts
+++ b/packages/taro-runtime/src/dom/element.ts
@@ -1,5 +1,5 @@
 import { inject, injectable } from 'inversify'
-import { isArray, isUndefined, Shortcuts, EMPTY_OBJ, warn, isString, toCamelCase } from '@tarojs/shared'
+import { isArray, isUndefined, Shortcuts, EMPTY_OBJ, warn, isString, toCamelCase, isFunction } from '@tarojs/shared'
 import SERVICE_IDENTIFIER from '../constants/identifiers'
 import { TaroNode } from './node'
 import { NodeType } from './node_types'
@@ -174,7 +174,7 @@ export class TaroElement extends TaroNode {
 
     const payload = {
       path: `${this._path}.${toCamelCase(qualifiedName)}`,
-      value
+      value: isFunction(value) ? () => value : value
     }
 
     this.hooks.modifySetAttrPayload?.(this, qualifiedName, payload)