progress bar with vuejs

up vote
0
down vote

favorite

I have a progress bar that amount increments when I click it, but I am trying to make the width increment as well. I have tried binding the style class to "score" but that breaks it. I presume I am mission some logic to increase the width. any help would be great

<!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>

asked Nov 22 at 3:41

Vzupo

309214

2

you should be able to bind style to score like this :style="{ width: score + '%' }". How did you bind it? also your data should be a function
– Andrew1325
Nov 22 at 3:51

No worries. Cheers.
– Andrew1325
Nov 22 at 3:57

add a comment |

up vote
0
down vote

favorite

<!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>

asked Nov 22 at 3:41

Vzupo

309214

2

you should be able to bind style to score like this :style="{ width: score + '%' }". How did you bind it? also your data should be a function
– Andrew1325
Nov 22 at 3:51

No worries. Cheers.
– Andrew1325
Nov 22 at 3:57

add a comment |

up vote
0
down vote

favorite

<!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>

asked Nov 22 at 3:41

Vzupo

309214

<!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>

<!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>

<!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>

css vue.js

asked Nov 22 at 3:41

Vzupo

309214

asked Nov 22 at 3:41

Vzupo

309214

asked Nov 22 at 3:41

Vzupo

309214

asked Nov 22 at 3:41

Vzupo

309214

asked Nov 22 at 3:41

Vzupo

309214

2

you should be able to bind style to score like this :style="{ width: score + '%' }". How did you bind it? also your data should be a function
– Andrew1325
Nov 22 at 3:51

No worries. Cheers.
– Andrew1325
Nov 22 at 3:57

add a comment |

2

you should be able to bind style to score like this :style="{ width: score + '%' }". How did you bind it? also your data should be a function
– Andrew1325
Nov 22 at 3:51

No worries. Cheers.
– Andrew1325
Nov 22 at 3:57

you should be able to bind style to score like this :style="{ width: score + '%' }". How did you bind it? also your data should be a function
– Andrew1325
Nov 22 at 3:51

No worries. Cheers.
– Andrew1325
Nov 22 at 3:57

add a comment |

2 Answers
2

active

oldest

votes

up vote
0
down vote

andrew1325 allready given you the answer in comment. i just added
the solution in solution panel

<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>

answered Nov 22 at 5:06

Emtiaz Zahid

1,015516

add a comment |

up vote
0
down vote

If you want to directly bind your score to your progress bar maybe you should consider to limit your score to 100 since the max value of the progress bar is, indeed, 100. Your snippet could be like this:

<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>

Otherwise, you could use a computed var to build your progress bar:

<!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>

answered Nov 22 at 6:46

fvaco

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53423561%2fprogress-bar-with-vuejs%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
0
down vote

andrew1325 allready given you the answer in comment. i just added
the solution in solution panel

<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>

answered Nov 22 at 5:06

Emtiaz Zahid

1,015516

add a comment |

up vote
0
down vote

andrew1325 allready given you the answer in comment. i just added
the solution in solution panel

<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>

answered Nov 22 at 5:06

Emtiaz Zahid

1,015516

add a comment |

up vote
0
down vote

andrew1325 allready given you the answer in comment. i just added
the solution in solution panel

<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>

answered Nov 22 at 5:06

Emtiaz Zahid

1,015516

andrew1325 allready given you the answer in comment. i just added
the solution in solution panel

<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>

answered Nov 22 at 5:06

Emtiaz Zahid

1,015516

answered Nov 22 at 5:06

Emtiaz Zahid

1,015516

answered Nov 22 at 5:06

Emtiaz Zahid

1,015516

answered Nov 22 at 5:06

Emtiaz Zahid

1,015516

add a comment |

up vote
0
down vote

<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>

Otherwise, you could use a computed var to build your progress bar:

<!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>

answered Nov 22 at 6:46

fvaco

add a comment |

up vote
0
down vote

<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>

Otherwise, you could use a computed var to build your progress bar:

<!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>

answered Nov 22 at 6:46

fvaco

add a comment |

up vote
0
down vote

<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>

Otherwise, you could use a computed var to build your progress bar:

<!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>

answered Nov 22 at 6:46

fvaco

<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>

Otherwise, you could use a computed var to build your progress bar:

<!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>

answered Nov 22 at 6:46

fvaco

answered Nov 22 at 6:46

fvaco

answered Nov 22 at 6:46

fvaco

answered Nov 22 at 6:46

fvaco

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Qfyilyi