本教學教大家製作「走動」的bootstrap進度條,供大家參考,具體內容如下
1.頁面效果:
起始位置:
點擊"走.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"
綁定內聯樣式:
a.物件語法:v-bind:style 的物件語法十分直觀-看著非常像CSS,其實它是一個JavaScript 物件。 CSS 屬性名稱可以用駝峰式(camelCase)或短橫分隔命名(kebab-case):
eg:
html:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
js:
樣式物件通常比較好,讓模板更清楚:
html:
data: { activeColor: 'red', fontSize: 30 }
js:
<div v-bind:style="styleObject"></div>
:
data: { styleObject: { color: 'red', fontSize: '13px' } }
in
:
:很多語法群組應用在一個元素上:eg:html:<div v-bind:style="[styleObjectA, styleObjectB]">
data: { styleObjectA: { color: 'red' }, styleObjectB:{ fontSize: '13px' } }c.自動加上前綴: 當v-bind:style 使用廠商前綴的CSS偵測並新增對應的前綴。 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("进度条已经走完"); } } }, data () { return { //进度条样式 progressStyle:{ width:'10%', }, } }, } </script>
3.js程式碼:
.progress { height: 40px; transition: 3s; } .progress-bar { font-size: 16px; line-height: 40px; }
4.style
rrreee
陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影:貝殼謎語解決方案
3 週前ByDDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
2 週前ByDDD
威爾R.E.P.O.有交叉遊戲嗎?
1 個月前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Dreamweaver Mac版
視覺化網頁開發工具

PhpStorm Mac 版本
最新(2018.2.1 )專業的PHP整合開發工具

MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SAP NetWeaver Server Adapter for Eclipse
將Eclipse與SAP NetWeaver應用伺服器整合。

WebStorm Mac版
好用的JavaScript開發工具