Interessanter Bootstrap-Walking-Fortschrittsbalken

In diesem Tutorial erfahren Sie, wie Sie als Referenz einen „gehenden“ Bootstrap-Fortschrittsbalken erstellen. Der spezifische Inhalt ist wie folgt:

Ausgangsposition:

Nach dem Klicken auf die Schaltfläche „Los“

2.html-Code:

v-bind:style="progressStyle"

<div>
<div class="progress progress-striped active">
 <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" v-bind:style="progressStyle">进度条</div>
</div>
<button type=&#39;button&#39; v-on:click=&#39;queryEnterprise&#39; class=&#39;btn btn-primary&#39;>走</button>
</div>

Inline-Stil binden:

a. Objektsyntax: Die Objektsyntax von v-bind:style ist sehr intuitiv – sie ähnelt stark CSS, ist aber tatsächlich ein JavaScript-Objekt. CSS-Eigenschaftsnamen können in CamelCase oder Kebab-Case benannt werden:

zB:

html:

<div v-bind:style="{ color: activeColor, fontSize: fontSize + &#39;px&#39; }"></div>

js:

data: {
 activeColor: 'red',
 fontSize: 30
}

Normalerweise ist es besser, direkt an ein Stilobjekt zu binden, um die Vorlage übersichtlicher zu machen:

html:

<div v-bind:style="styleObject"></div>

js:

data: {
 styleObject: {
 color: 'red',
 fontSize: '13px'
 }
}

b .Array-Syntax: Die Array-Syntax von v-bind:style kann mehrere Stilobjekte auf ein Element anwenden:

eg:

html:

<div v-bind:style="[styleObjectA, styleObjectB]">

data: {
 styleObjectA: {
 color: 'red'
 },
 styleObjectB:{
 fontSize: '13px'
 }
}

c. Präfix automatisch hinzufügen: Wenn v-bind:style CSS-Eigenschaften verwendet, die Herstellerpräfixe erfordern, wie z. B. transform, erkennt Vue.js automatisch das entsprechende Präfix und fügt es hinzu.

3.js-Code:

<script>
export default {
 components:{},
 props:{},
  ready:function(){},
  computed:{},
  methods:{
   queryEnterprise:function(){
    if(parseInt(this.progressStyle.width)<100){
     this.progressStyle.width=parseInt(this.progressStyle.width)+30+&#39;%&#39;;
    }else{
     alert("进度条已经走完");
    }
   }
  },
 data () {
  return {
   //进度条样式
    progressStyle:{
     width:&#39;10%&#39;,
    },
  }
 },
 
}
</script>

4.style

.progress {
 height: 40px;
 transition: 3s;
}
.progress-bar {
 font-size: 16px;
 line-height: 40px;
}

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird