vuedemo09
2018-03-31 本文已影响0人
知识分享share
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<style>
#bag{
width: 200px;
height: 500px;
margin: 0 auto;
background: url("Lesson-13/Lesson-13/img/bag.png");
}
#bag.burst{
background: url("Lesson-13/Lesson-13/img/bag-burst.png");
}
#bag-health{
width: 200px;
border: 2px #000 solid;
margin: 20px auto 20px auto;
}
#bag-health div{
height:20px;
background: crimson;
}
#controls{
width: 200px;
margin: 0 auto;
}
#controls button{
margin-left: 20px;
}
</style>
</head>
<body>
<div id="app">
<!--图片-->
<div id="bag" v-bind:class="{burst:ended}"></div>
<!--进度情况-->
<div id="bag-health">
<div v-bind:style="{width:health+'%'}"></div>
</div>
<!--控制按钮-->
<div id="controls">
<button v-on:click="punch" v-show="!ended">使劲敲</button>
<button v-on:click="restart">重新开始</button>
</div>
</div>
</body>
</html>
<script>
new Vue({
el:"#app",
data:{
health:100,
ended:false
},
methods:{
punch:function () {
this.health -= 10;
if(this.health <= 0){
this.ended = true;
}
},
restart:function () {
this.health = 100;
this.ended = false;
}
},
computed:{
}
});
</script>
