興味深いブートストラップウォーキングプログレスバー-PHP开发-php.cn

興味深いブートストラップウォーキングプログレスバー

高洛峰

リリース： 2016-12-03 10:04:46

オリジナル

1515 人が閲覧しました

このチュートリアルでは、参考のために「ウォーキング」ブートストラップ進行状況バーを作成する方法を説明します。具体的な内容は次のとおりです

1. ページ効果:

開始位置:

興味深いブートストラップウォーキングプログレスバー

「Go」ボタンをクリックした後。

2 .html code:

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

ログイン後にコピー

v-bind:style="progressStyle"

Bind inline style:

a. オブジェクト構文: v-bind:style のオブジェクト構文は非常に直感的であり、CSS に非常によく似ています。 , 実はこれはJavaScriptのオブジェクトです。 CSS プロパティ名は、キャメルケースまたはケバブケースで名前を付けることができます。

eg:

html:

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

ログイン後にコピー

js:

data: {
 activeColor: &#39;red&#39;,
 fontSize: 30
}

ログイン後にコピー

は、通常、Style オブジェクトに直接バインドされた方が優れており、テンプレートを作成しますより明確:

html:

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

ログイン後にコピー

js:

data: {
 styleObject: {
 color: &#39;red&#39;,
 fontSize: &#39;13px&#39;
 }
}

ログイン後にコピー

b. 配列構文: v-bind:style の配列構文は複数のスタイルオブジェクトを結合できます要素に適用されます:

例:

html:

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

ログイン後にコピー

data: {
 styleObjectA: {
 color: &#39;red&#39;
 },
 styleObjectB:{
 fontSize: &#39;13px&#39;
 }
}

ログイン後にコピー

c. プレフィックスを自動的に追加する: v-bind:style が、transform などのベンダープレフィックスを必要とする CSS プロパティを使用する場合、Vue.js は適切なプレフィックスを自動的に検出して追加します。

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

ログイン後にコピー

以上がこの記事の全内容です、皆様の学習のお役に立てれば幸いです

興味深いブートストラップ ウォーキング プログレス バー

興味深いブートストラップウォーキングプログレスバー