本篇文章用Vue简单实现进度条的变化，供大家参考，具体内容如下 先上一波效果图： 点击减后，每次减百分之十 减到百分之0后，减操作按钮隐藏 然后点击重头开始，恢复到初始状态
本篇文章用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的时候隐藏
--结束END--
本文标题: Vue实现进度条变化效果
本文链接: https://www.lsjlt.com/news/134605.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0