bootstrap走动的进度条
1.页面效果:
起始位置:
文章图片
单击"走"按钮后
文章图片
2.html代码:
文章图片
class="progress progress-striped active"> class="progress-bar"role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" v-bind:style="progressStyle">进度条
文章图片
v-bind:style="progressStyle"
绑定内联样式:
a.对象语法:
v-bind:style 的对象语法十分直观——看着非常像 CSS，其实它是一个 JavaScript 对象。CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）：eg:
html:
"{ color: activeColor, fontSize: fontSize + 'px' }">
js:
data: { activeColor: 'red', fontSize: 30 }
【bootstrap走动的进度条】 直接绑定到一个样式对象通常更好，让模板更清晰：
html:
"styleObject">
js:
文章图片
data: { styleObject: { color: 'red', fontSize: '13px' } }
文章图片
b.数组语法:
v-bind:style 的数组语法可以将多个样式对象应用到一个元素上：eg:
html:
"[styleObjectA, styleObjectB]">
js:
文章图片
data: { styleObjectA: { color: 'red' }, styleObjectB:{ fontSize: '13px' } }
文章图片
c.自动添加前缀: 当
v-bind:style 使用需要厂商前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。3.js代码:
文章图片
文章图片
4.style
文章图片
.progress { height: 40px; transition: 3s; } .progress-bar { font-size: 16px; line-height: 40px; }
推荐阅读
- 热闹中的孤独
- JAVA（抽象类与接口的区别&重载与重写&内存泄漏）
- 放屁有这三个特征的，请注意啦！这说明你的身体毒素太多
- 一个人的旅行，三亚
- 布丽吉特，人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事，我的思考。
- 家乡的那条小河
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量