Vue实现的一个简单的Demo

一个你可以看得懂的Demo

二话不说先看效果!

Vue实现的一个简单的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>

小结:刚开始学,小白制作,大佬略过!!!!!!

Vue实现的一个简单的Demo

本文地址:https://blog.csdn.net/justdoit936/article/details/109557207

猜你喜欢