有趣的bootstrap走动进度条


Posted in Javascript onDecember 01, 2016

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

1.页面效果:

起始位置:

有趣的bootstrap走动进度条

单击"走"按钮后

有趣的bootstrap走动进度条

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">进度条</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:

data: {
 activeColor: 'red',
 fontSize: 30
}

直接绑定到一个样式对象通常更好,让模板更清晰:

html:

<div v-bind:style="styleObject"></div>

js:

data: {
 styleObject: {
 color: 'red',
 fontSize: '13px'
 }
}

b.数组语法:  v-bind:style 的数组语法可以将多个样式对象应用到一个元素上:

eg:

html:

<div v-bind:style="[styleObjectA, styleObjectB]">

js:

data: {
 styleObjectA: {
 color: 'red' 
 },
 styleObjectB:{
 fontSize: '13px'
 }
}

c.自动添加前缀: 当 v-bind:style 使用需要厂商前缀的 CSS 属性时,如 transform,Vue.js 会自动侦测并添加相应的前缀。

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>

4.style

.progress {
 height: 40px;
 transition: 3s;
}
.progress-bar {
 font-size: 16px;
 line-height: 40px;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 验证密码强弱的小例子
Mar 21 Javascript
jsonp原理及使用
Oct 28 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
JavaScript实现复制文章自动添加版权
Aug 02 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
小程序实现选择题选择效果
Nov 04 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 Javascript
javascript中call,apply,bind的区别详解
Dec 11 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 #Javascript
第一次接触神奇的前端框架vue.js
Dec 01 #Javascript
bootstrapValidator自定验证方法写法
Dec 01 #Javascript
jQuery生成假加载动画效果
Dec 01 #Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 #Javascript
浅谈js键盘事件全面控制
Dec 01 #Javascript
jstree的简单实例
Dec 01 #Javascript
You might like
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
PHP-FPM 的管理和配置详解
2019/02/17 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
JavaScript中的this机制
2016/01/30 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
python多线程之事件Event的使用详解
2018/04/27 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
Python的历史与优缺点整理
2020/05/26 Python
python 线程的五个状态
2020/09/22 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
编写strcpy函数
2014/06/24 面试题
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
仲裁协议书
2014/09/26 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
2015年客房服务员工作总结
2015/05/15 职场文书
围城读书笔记
2015/06/26 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis
Win11 引入 Windows 365 云操作系统,适应疫情期间混合办公模式:启动时直接登录、模
2022/04/06 数码科技
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS