如何在Salesforce Lightning Web Component中绑定变量设置进度条style宽度

LWC不支持直接在template的style属性内拼接变量，需要先在JS层把样式规则拼接为完整字符串，再绑定到元素的style属性上，具体实现步骤如下：

步骤1：JS文件中定义响应式变量与动态样式计算逻辑 #

import { LightningElement, track } from 'lwc';

export default class ProgressBarDemo extends LightningElement {
    // 进度值，范围0-100，可根据业务逻辑（接口返回、用户操作等）动态更新
    @track progress = 65;

    // getter动态返回拼接完成的样式字符串
    get progressBarStyle() {
        return `width: ${this.progress}%;`;
    }

    // 示例方法：触发进度更新，可替换为自有业务逻辑
    handleUpdateProgress() {
        this.progress = Math.min(this.progress + 10, 100);
    }
}

步骤2：HTML模板中绑定动态样式 #

直接将JS中定义的getter变量绑定到进度条元素的style属性即可：

<template>
    <!-- 进度条外层容器 -->
    <div class="progress-container">
        <!-- 绑定动态样式到进度条元素 -->
        <div class="progress-bar" style={progressBarStyle}>
            <span class="progress-text">{progress}%</span>
        </div>
    </div>

    <!-- 测试用按钮，可按需删除 -->
    <lightning-button 
        label="增加进度" 
        onclick={handleUpdateProgress} 
        class="slds-m-top_small"
    >
    </lightning-button>
</template>

步骤3：CSS文件补充基础样式（可按需调整） #

.progress-container {
    width: 100%;
    height: 24px;
    background-color: #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background-color: #2e844a;
    transition: width 0.3s ease; /* 增加过渡动画让进度变化更流畅 */
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.progress-text {
    color: white;
    font-size: 12px;
    padding-right: 8px;
    font-weight: bold;
}

注意事项 #

• 不要直接在HTML的style属性内写style="width: {progress}%"，该写法LWC不支持，会触发报错
• 如果需要绑定多个样式属性，直接在getter中拼接即可，示例：return width: ${this.progress}%; background-color: ${this.progress < 50 ? 'red' : 'green'};``
• 如果你使用的是Aura组件，实现逻辑一致，仅绑定属性时需要加v.前缀，写法为{!v.progressBarStyle}

内容的提问来源于stack exchange，提问作者Mohammadaltamas Mohammadarif S