<!--
需求：
背景图片，进度条，减和重置按钮
进度条填满红色，值为100%，点击减时，进度条依次减十，减到0时换一张背景图片，减按钮消失，点击重置按钮时，进度条重新填满红色
-->
效果图：
点击减按钮后：
进度条减为0后：
点击重置后：
源码：
<!--
需求：
背景图片，进度条，减和重置按钮
进度条填满红色，值为100%，点击减时，进度条依次减十，减到0时换一张背景图片，减按钮消失，点击重置按钮时，进度条重新填满红色
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>testUI</title>
<script src="vue/vue.js"></script>
<style>
#picture{/*背景图片*/
background:url("smallPicture.png") no-repeat;
margin:0 auto;
width:250px;
height:100px;
}
#progress{/*进度条框*/
width:200px;
height:30px;
border:solid 1px black;
margin:0 auto;
}
#progress div{/*进度条内部红色div*/
width:100%;
height:30px;
background-color: red;
}
#button{/*减和重置按钮*/
width:100px;
height:200px;
margin:0 auto;
margin-top:30px;
}
#picture.burst{/*重新更换的一个背景图片*/
background:url("black.jpg") no-repeat;
}
</style>
</head>
<body>
<div id="vue">
<div id="picture" v-bind:class="{burst:ended}"></div>
<div id="progress" >
<div v-bind:style={width:score+"%"}></div>
</div>
<div id="button">
<button v-on:click="desc" v-show="!ended">减</button><!--点击依次减10，开始时按钮显示，当进度条红色为0时，ended标为true，减按钮消失-->
<button v-on:click="restart">重置</button><!--点击重置按钮时，进度条红色重置为100%-->
</div>
</div>
</body>
</html> <script>
new Vue({
el: "#vue",
data: {
score:100,
ended:false//用作正确与否作为判断
},
methods: {//减方法
desc:function(){
this.score-=10;
if(this.score==0){//如果进度条内部的红色为0了，则将ended的值改为true
this.ended=true;
}
},//重置方法
restart:function(){
this.score=100;
}
},
computed: { }
});
</script>