本教程教大家制作“走动”着的bootstrap进度条,供大家参考,具体内容如下
1.页面效果:
起始位置:
单击"走"按钮后
绑定内联样式:
a.对象语法:v-bind:style 的对象语法十分直观——看着非常像 CSS,其实它是一个 JavaScript 对象。CSS 属性名可以用驼峰式(camelCase)或短横分隔命名(kebab-case):
eg:
html:
js:
直接绑定到一个样式对象通常更好,让模板更清晰:
html:
js:
b.数组语法: v-bind:style 的数组语法可以将多个样式对象应用到一个元素上:
eg:
html:
js:
c.自动添加前缀: 当 v-bind:style 使用需要厂商前缀的 CSS 属性时,如 transform,Vue.js 会自动侦测并添加相应的前缀。