Vue实现的一个简单的Demo
程序员文章站
2022-04-10 08:35:43
一个你可以看得懂的Demo二话不说先看效果！解释一下吧，实现的效果！Punch可以控制红色进度条，Restart就是重新开始。嘻嘻嘻~~~~~，进度条小于等于0时颜色发生Turn down…懂的都懂！！！是时候上才艺了：HTML代码
一个你可以看得懂的Demo
二话不说先看效果！
解释一下吧，实现的效果！Punch可以控制红色进度条，Restart就是重新开始。嘻嘻嘻~~~~~，进度条小于等于0时颜色发生Turn down…
懂的都懂！！！
是时候上才艺了：
HTML代码
<div id="app">
<div class="bug" :class="{turn:use}">
</div>
<div class="bottom">
<div :style="{width:health+'%'}"></div>
</div>
<div class="bt">
<button @click="punch" v-show="!use">Punch</button>
<button @click="restart" >Restart</button>
</div>
</div>
JS代码
<script>
new Vue({
el:"#app",
data:{
health:100,
use:false,
},
methods:{
punch(){
this.health -= 10;
if (this.health<=0) {
this.use=true;
}
},
restart(){
this.health=100;
this.use=false;
}
}
})
</script>
CSS代码：
<style>
.bug{
width: 100px;
height:100px;
background-color:pink;
background-size:80%;
margin:0 auto;
}
.bug.turn{
background-color:yellow;
background-size:80%;
margin:0 auto;
}
.bottom{
border:2px #000 solid;
width: 100px;
margin:10px auto 10px auto;
}
.bottom div{
height:10px;
background-color:red;
}
.bt{
width: 120px;
margin:0 auto;
}
</style>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.bug{
width: 100px;
height:100px;
background-color:pink;
background-size:80%;
margin:0 auto;
}
.bug.turn{
background-color:yellow;
background-size:80%;
margin:0 auto;
}
.bottom{
border:2px #000 solid;
width: 100px;
margin:10px auto 10px auto;
}
.bottom div{
height:10px;
background-color:red;
}
.bt{
width: 120px;
margin:0 auto;
}
</style>
</head>
<body>
<div id="app">
<div class="bug" :class="{turn:use}">
</div>
<div class="bottom">
<div :style="{width:health+'%'}"></div>
</div>
<div class="bt">
<button @click="punch" v-show="!use">Punch</button>
<button @click="restart" >Restart</button>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
health:100,
use:false,
},
methods:{
punch(){
this.health -= 10;
if (this.health<=0) {
this.use=true;
}
},
restart(){
this.health=100;
this.use=false;
}
}
})
</script>
</body>
</html>
小结：刚开始学，小白制作，大佬略过！！！！！！
本文地址：https://blog.csdn.net/justdoit936/article/details/109557207
上一篇： js实现特别简单的钟表效果