Vue实现进度条变化效果
更新时间：2021年09月03日 15:48:07 作者：qq_29914229
这篇文章主要为大家详细介绍了Vue实现进度条变化效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本篇文章用Vue简单实现进度条的变化，供大家参考，具体内容如下
先上一波效果图：
点击减后，每次减百分之十
减到百分之0后，减操作按钮隐藏
然后点击重头开始，恢复到初始状态
二话不说，上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
<div class="process">
<div v-bind:style="{width: health+'%'}"></div>
</div>
<div class="bu">
<button v-on:click="sub" v-show="!eable">减</button>
<button v-on:click="reset">重头开始</button>
</div>
</div>
js：
<script src="app.js"></script>
</body>
</html>
new Vue({
el:"#vue-app",
data:{
health :100,
eable : false
},
methods :{
sub : function () {
this.health -= 10;
if(this.health <= 0){
this.eable = true;
}
},
reset : function () {
this.health = 100;
this.eable = false;
}
}
});
CSS:
.process{
width: 250px;
height: 30px;
margin: 0 auto;
border: black 4px solid;
}
.process div{
height: 30px;
background: red;
}
.bu{
width: 250px;
margin: 20px auto;
}
.bu button{
margin: 0 20px;
}
简单的实现思路如下：
用v-bind:style将width的值与health绑定，减的时候每次减10，减到0的时候，将减这个按钮隐藏
隐藏的时候可以使用一个状态变量，根据v-show来控制，为true的时候显示，为false的时候隐藏
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue实现点击选中取消切换，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了vue3下eslint配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要介绍了Vue与React的区别和优势对比，帮助大家更好的选择适合自己的前端框架，迷茫的同学可以进来参考下2020-12-12
这篇文章主要介绍了element Drawer 抽屉无法渲染问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
element ui中的table表格数据是动态生成的,最近遇到个需求,要求我们对单元格进行合并,所以下面这篇文章主要给大家介绍了关于Element UI中table单元格合并的解决过程,需要的朋友可以参考下2022-08-08
这篇文章主要给大家介绍了关于Vue项目中如何使用Axios封装http请求的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-10-10
今天小编就为大家分享一篇解决vue的 v-for 循环中图片加载路径问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了form 表单验证是异步问题记录,通过实例代码介绍了Promise.all 和 Promise.allSettled 区别，需要的朋友可以参考下2023-01-01
在前端开发中,经常需要打印页面的特定部分,比如客户列表或商品详情页,要快速实现这些功能,可以使用 vue3-print-nb 插件,本文就给大家介绍了如何在 Vue 3 中使用 vue3-print-nb 实现灵活的前端打印,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了vue实现修改标签中的内容：id class style，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
最新评论