有趣的bootstrap走動(dòng)進(jìn)度條
本教程教大家制作“走動(dòng)”著的bootstrap進(jìn)度條，供大家參考，具體內(nèi)容如下
1.頁(yè)面效果：
起始位置:
單擊"走"按鈕后
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">進(jìn)度條</div> </div> <button type='button' v-on:click='queryEnterprise' class='btn btn-primary'>走</button> </div>
v-bind:style="progressStyle"
綁定內(nèi)聯(lián)樣式:
a.對(duì)象語法:v-bind:style 的對(duì)象語法十分直觀——看著非常像 CSS，其實(shí)它是一個(gè) JavaScript 對(duì)象。CSS 屬性名可以用駝峰式（camelCase）或短橫分隔命名（kebab-case）：
eg:
html:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
js:
data: {
activeColor: 'red',
fontSize: 30
}
直接綁定到一個(gè)樣式對(duì)象通常更好，讓模板更清晰：
html:
<div v-bind:style="styleObject"></div>
js:
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
b.數(shù)組語法: v-bind:style 的數(shù)組語法可以將多個(gè)樣式對(duì)象應(yīng)用到一個(gè)元素上：
eg:
html:
<div v-bind:style="[styleObjectA, styleObjectB]">
js:
data: {
styleObjectA: {
color: 'red'
},
styleObjectB:{
fontSize: '13px'
}
}
c.自動(dòng)添加前綴: 當(dāng) v-bind:style 使用需要廠商前綴的 CSS 屬性時(shí)，如 transform，Vue.js 會(huì)自動(dòng)偵測(cè)并添加相應(yīng)的前綴。
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ìn)度條已經(jīng)走完");
}
}
},
data () {
return {
//進(jìn)度條樣式
progressStyle:{
width:'10%',
},
}
},
}
</script>
4.style
.progress {
height: 40px;
transition: 3s;
}
.progress-bar {
font-size: 16px;
line-height: 40px;
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- BootStrap初學(xué)者對(duì)彈出框和進(jìn)度條的使用感覺
- Bootstrap進(jìn)度條組件知識(shí)詳解
- Bootstrap每天必學(xué)之進(jìn)度條
- php基于jquery的ajax技術(shù)傳遞json數(shù)據(jù)簡(jiǎn)單實(shí)例
- jQuery學(xué)習(xí)筆記之 Ajax操作篇（二） - 數(shù)據(jù)傳遞
- 如何在前臺(tái)腳本通過json傳遞數(shù)據(jù)到后臺(tái)(使用微軟自帶的ajax)
- JSP中獲取ExtJS.Ajax前臺(tái)傳遞的JSON數(shù)據(jù)實(shí)現(xiàn)過程
- JavaScript 封裝Ajax傳遞的數(shù)據(jù)代碼
- $.ajax json數(shù)據(jù)傳遞方法
- Bootstrap進(jìn)度條與AJAX后端數(shù)據(jù)傳遞結(jié)合使用實(shí)例詳解
相關(guān)文章
js實(shí)現(xiàn)中文轉(zhuǎn)拼音的完整步驟記錄
這篇文章主要給大家介紹了關(guān)于js實(shí)現(xiàn)中文轉(zhuǎn)拼音的相關(guān)資料,主要利用了pinyin-pro包,可以完美的實(shí)現(xiàn)所需要的功能,需要的朋友可以參考下2021-06-06
es6基礎(chǔ)學(xué)習(xí)之解構(gòu)賦值
解構(gòu)賦值語法是一個(gè) Javascript 表達(dá)式，這使得可以將值從數(shù)組或?qū)傩詮膶?duì)象提取到不同的變量中。這篇文章主要給大家介紹了關(guān)于es6基礎(chǔ)學(xué)習(xí)之解構(gòu)賦值的相關(guān)資料，需要的朋友可以參考下2018-12-12
JS在IE和FireFox之間常用函數(shù)的區(qū)別小結(jié)
IE和FireFox之間常用函數(shù)的區(qū)別小結(jié)，需要的朋友可以參考下。2010-03-03
JS實(shí)現(xiàn)先顯示大圖后自動(dòng)收起顯示小圖的廣告代碼
這篇文章主要介紹了JS實(shí)現(xiàn)先顯示大圖后自動(dòng)收起顯示小圖的廣告代碼,涉及javascript頁(yè)面元素屬性的操作及數(shù)學(xué)運(yùn)算技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
javascript 中的console.log和彈出窗口alert
這篇文章主要介紹了javascript 中的console.log和彈出窗口alert 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友參考下吧2016-08-08
js中通過getElementsByName訪問name集合對(duì)象的方法
下面小編就為大家?guī)硪黄猨s中通過getElementsByName訪問name集合對(duì)象的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
Bootstrap是twitter的工程師在業(yè)余時(shí)間開發(fā)的，是一款目前非常流行的前端框架。本文給大家介紹第一篇初識(shí)bootstrap的相關(guān)知識(shí)，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
微信小程序?qū)崿F(xiàn)長(zhǎng)按拖拽排序功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)長(zhǎng)按拖拽排序功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)接收驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
JavaScript實(shí)現(xiàn)自己的DOM選擇器原理及代碼
實(shí)現(xiàn)自己的DOM選擇器時(shí)匹配行為也應(yīng)該和瀏覽原生匹配行為一致,接下來本文將詳細(xì)介紹下實(shí)現(xiàn)思路及方法，感興趣的你可以參考下或許對(duì)你鞏固知識(shí)有所幫助2013-03-03