Question

我有一个进度栏，当我单击它时，数量会增加，但是我也在尝试使宽度增加。我尝试将样式类绑定到“分数”，但这会破坏它。我想我的使命是增加宽度。任何帮助都很好

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
      {{score}} <button v-on:click="incrementBy20">Click</button>

      <div class="progress">
  <div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" style="width:70%">
  {{this.score}}
  </div>
</div>
      </div>
    

<script>
    
    new Vue({
      el: '#app',
      data: {
        score: 0
      },
     
      methods:{
          incrementBy20:function(){
              this.score+=20;
          },
          
      },
      mounted:function(){
         this.incrementBy20()
         
    }
        
    });
    </script>
</body>
</html>

Answer 1

如果您想直接将分数绑定到进度条，也许应该考虑将分数限制为100，因为进度条的最大值实际上是100。您的代码段可能是这样的：

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
      {{score}} <button v-on:click="incrementBy20">Click</button>

      <div class="progress">
  <div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" :style="{width: score+'%'}">
  {{this.score}}
  </div>
</div>
      </div>


<script>

    new Vue({
      el: '#app',
      data: {
        score: 0
      },

      methods:{
          incrementBy20:function(){
                let newScore = this.score + 20;
              this.score = newScore >= 100 ? 100: newScore; 
          },

      },
      mounted:function(){
         this.incrementBy20()

    }
    });
    </script>
</body>
</html>

否则，您可以使用计算出的var来构建进度栏：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
      {{score}} <button v-on:click="incrementBy20">Click</button>

      <div class="progress">
  <div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" :style="{width: progressWidth+'%'}">
  {{this.score}} / {{this.maxScore}}
  </div>
</div>
      </div>


<script>

    new Vue({
      el: '#app',
      data: {
        score: 0,
        maxScore: 3000
      },

      methods:{
          incrementBy20:function(){
                let newScore = this.score + 20;
              this.score = newScore >= this.maxScore ? this.maxScore: newScore; 
          },
      },
      computed: {
        progressWidth(){
            return (this.score * 100) / this.maxScore;
        }
      },
      mounted:function(){
         this.incrementBy20()

    }
    });
    </script>
</body>
</html>

Answer 2

andrew1325已在评论中为您提供了答案。我刚刚添加解决方案面板中的解决方案

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
      {{score}} <button v-on:click="incrementBy20">Click</button>

      <div class="progress">
         <div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" 
            :style="{ width: score + '%' }"> {{this.score}}
         </div>
      </div>
    </div>

<script>
    new Vue({
      el: '#app',
      data: function(){
        return{
           score: 0
        }
      },

      methods:{
          incrementBy20:function(){
              this.score+=20;
          },

      },
      mounted:function(){
         this.incrementBy20()

    }

    });
    </script>
</body>
</html>

vuejs的进度条

2 个答案: