| 本篇文章用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的时候隐藏 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
浅谈React的React.FC与React.Component的使用
关于JS数据类型检测的多种方式总结 |
