有趣的bootstrap走动进度条

前端之家收集整理的这篇文章主要介绍了有趣的bootstrap走动进度条前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本教程教大家制作“走动”着的bootstrap进度条,供大家参考,具体内容如下

1.页面效果

起始位置:

单击"走"按钮后

2.HTML代码:

绑定内联样式:

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 会自动侦测并添加相应的前缀。

3.js代码:

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%',},} },}

4.style

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/bootstrap/43997.html

猜你在找的Bootstrap相关文章