Vue实现进度条变化效果
作者：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的时候隐藏
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。