有趣的bootstrap走動進度條

更新時間：2016年12月01日 14:24:46 作者：愛喝酸奶的吃貨

這篇文章主要為大家詳細介紹了如何實現(xiàn)有趣的bootstrap走動進度條,具有一定的參考價值，感興趣的小伙伴們可以參考一下

本教程教大家制作“走動”著的bootstrap進度條，供大家參考，具體內(nèi)容如下

1.頁面效果：

起始位置:

單擊"走"按鈕后

2.html代碼:

<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='button' v-on:click='queryEnterprise' class='btn btn-primary'>走</button>
</div>

v-bind:style="progressStyle"

綁定內(nèi)聯(lián)樣式:

a.對象語法:v-bind:style 的對象語法十分直觀——看著非常像 CSS，其實它是一個 JavaScript 對象。CSS 屬性名可以用駝峰式（camelCase）或短橫分隔命名（kebab-case）：

eg:

html:

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

js:

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

直接綁定到一個樣式對象通常更好，讓模板更清晰：

html:

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

js:

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

b.數(shù)組語法: v-bind:style 的數(shù)組語法可以將多個樣式對象應用到一個元素上：

eg:

html:

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

js:

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

c.自動添加前綴: 當 v-bind:style 使用需要廠商前綴的 CSS 屬性時，如 transform，Vue.js 會自動偵測并添加相應的前綴。

3.js代碼:

<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+'%';
    }else{
     alert("進度條已經(jīng)走完");
    }
   }
  },
 data () {
  return {
   //進度條樣式
    progressStyle:{
     width:'10%',
    },
  }
 },

}
</script>

4.style

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript實現(xiàn)瀑布流布局的代碼分享
不知道大家在線上購物的時候有沒有發(fā)現(xiàn)到，自己逛起來根本就停不下來，越往下翻越是覺得就會出現(xiàn)需要的東西，這就是很多電商公司都在使用的瀑布流布局。本文就來用JS實現(xiàn)這一布局，需要的可以參考一下
2023-04-04
基于原生JS封裝的Modal對話框插件的示例代碼
這篇文章主要介紹了基于原生JS封裝的Modal對話框插件的示例代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-09-09
js實現(xiàn)頁面轉(zhuǎn)發(fā)功能示例代碼
本文為大家介紹的是使用js實現(xiàn)頁面轉(zhuǎn)發(fā)，具體實現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助
2013-08-08
JavaScript獲取頁面中表單（form）數(shù)量的方法
這篇文章主要介紹了JavaScript獲取頁面中表單（form）數(shù)量的方法,涉及javascript操作表單document.forms數(shù)組的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-04-04
詳解小程序緩存插件(mrc)
這篇文章主要介紹了詳解小程序緩存插件(mrc)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
JavaScript雙問號(??)操作符用法詳解
在現(xiàn)代JavaScript開發(fā)中,處理變量默認值是一個常見但容易引發(fā)bug的操作,很多開發(fā)者可能都遇到過這樣的問題：使用||設(shè)置默認值時,意外覆蓋了0、''等合法值,這時候,ES2020引入的雙問號操作符（??）就能完美解決這類問題,本文將帶您全面掌握這個操作符的使用場景和高級技巧
2025-04-04
JavaScript結(jié)合HTML DOM實現(xiàn)聯(lián)動菜單
這篇文章主要為大家詳細介紹了JavaScript結(jié)合HTML DOM實現(xiàn)聯(lián)動菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
JS 動態(tài)判斷PC和手機瀏覽器實現(xiàn)代碼
這篇文章主要介紹了JS 動態(tài)判斷PC和手機瀏覽器實現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下
2016-09-09
vscode錄音及語音實時轉(zhuǎn)寫插件開發(fā)并在工作區(qū)生成本地mp3文件附踩坑日記！
以目前的vscode版本來說，作者并沒有開放訪問本地媒體權(quán)限，所以插件市場里面的所有語音相關(guān)插件也并沒有直接獲取vscode的媒體權(quán)限，這篇文章主要介紹了vscode錄音及語音實時轉(zhuǎn)寫插件開發(fā)并在工作區(qū)生成本地mp3文件?踩坑日記！,需要的朋友可以參考下
2023-05-05
如何基于JavaScript判斷圖片是否加載完成
這篇文章主要介紹了如何基于JavaScript判斷圖片是否加載完成,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-12-12