根据动态宽度更改进度条的类别

Question

我有一个宽度动态变化的进度条，因此如果宽度小于或等于 50%，则引导进度条的类别应为“进度条警告”，否则如果宽度大于 50% 的类别bootstrap 进度条应该是“progress-bar-success”。我已经检查过每个地方，但发现很难让它工作。请任何帮助？这是 HTML 代码：客户贷款.php                   <td>                                            <span class="header-text">                                                <div class="progress-bar          progress-bar-striped active progressbartextcolor"           id="progressbarcolorchange" role="progressbar" aria-valuenow="25"                aria-valuemin="0" v-bind:style="{width: customerLoan.progress                    + '%'}" aria-valuemax="100">{{customerLoan.progress ||            "0"}}%</div>                                            </span>                                        </td>客户贷款.js   var vueCustomerLoans = new Vue({       el: "#table-records",      data: {    customerLoans: []       },         methods: {    navigateToView: function (row) {        document.location = "backoffice/customer-loan?id=" +         JSON.stringify(row.id);       }      }    });

Answer 1

用 "attr" 获取 "valuenow" 的值怎么样？

<td>

    <span class="header-text">

        <div class="progress-bar 

             progress-bar-striped active progressbartextcolor" 

             id="progressbarcolorchange" role="progressbar" aria- 

             valuenow="25" aria-valuemin="0" v-bind:style="{width: 

             customerLoan.progress + '%'}" aria-valuemax="100"> 

            {{customerLoan.progress || "0"}}%</div>

    </span>

</td>

<script>

    $(document).ready(function () {

        var bar = $('#progressbarcolorchange').attr('valuenow');

        if (bar <= 50) {

            $('#progressbarcolorchange').addClass("progress-bar-warning");

        } else {

            $('#progressbarcolorchange').addClass("progress-bar-success");

        }

    });

</script>

我猜“valuenow”总是在变化，对吗？