有趣的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实现计算代码行数的简单方法附代码
Aug 13 Javascript
jQuery 相关控件的事件操作分解
Aug 03 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
js操作iframe父子窗体示例
May 22 Javascript
node.js中的fs.readlinkSync方法使用说明
Dec 17 Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 Javascript
jQuery获取与设置iframe高度的方法
Aug 01 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
element-ui表格合并span-method的实现方法
May 21 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提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十)
2014/06/24 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
PHP统计代码行数的小代码
2019/09/19 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
开放系统互连参考模型
2016/06/29 面试题
工作建议书范文
2014/05/13 职场文书
总经理任命书范本
2014/06/05 职场文书
优秀大学生自荐信
2014/06/09 职场文书
岗位职责说明书模板
2014/07/30 职场文书
办公室岗位职责
2015/02/04 职场文书
法务专员岗位职责
2015/02/14 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL