欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue实现的一个简单的Demo

程序员文章站 2022-04-10 08:35:43
一个你可以看得懂的Demo二话不说先看效果!解释一下吧,实现的效果!Punch可以控制红色进度条,Restart就是重新开始。嘻嘻嘻~~~~~,进度条小于等于0时颜色发生Turn down…懂的都懂!!!是时候上才艺了:HTML代码

一个你可以看得懂的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