有趣的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 相关文章推荐
监控 url fragment变化的js代码
Apr 19 Javascript
Android中的jQuery:AQuery简介
May 06 Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
Vue formData实现图片上传
Aug 20 Javascript
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 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
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
python批量同步web服务器代码核心程序
2014/09/01 Python
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
python跨文件使用全局变量的实现
2020/11/17 Python
仓库主管岗位职责
2014/03/02 职场文书
贷款担保申请书
2014/05/20 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
公历12个月名称的由来
2022/04/12 杂记