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

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>&nbsp; &nbsp; <span class="header-text">&nbsp; &nbsp; &nbsp; &nbsp; <div class="progress-bar&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;progress-bar-striped active progressbartextcolor"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;id="progressbarcolorchange" role="progressbar" aria-&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;valuenow="25" aria-valuemin="0" v-bind:style="{width:&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;customerLoan.progress + '%'}" aria-valuemax="100">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{customerLoan.progress || "0"}}%</div>&nbsp; &nbsp; </span></td><script>&nbsp; &nbsp; $(document).ready(function () {&nbsp; &nbsp; &nbsp; &nbsp; var bar = $('#progressbarcolorchange').attr('valuenow');&nbsp; &nbsp; &nbsp; &nbsp; if (bar <= 50) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#progressbarcolorchange').addClass("progress-bar-warning");&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#progressbarcolorchange').addClass("progress-bar-success");&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });</script>我猜“valuenow”总是在变化，对吗？