Vue实现的一个简单的Demo

最新推荐文章于 2024-04-18 14:41:10 发布

枫晨QL

最新推荐文章于 2024-04-18 14:41:10 发布

阅读量636

点赞数 3

分类专栏： Web 文章标签： css vue.js html javascript

本文链接：https://blog.csdn.net/justdoit936/article/details/109557207

版权

Web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

小结：刚开始学，小白制作，大佬略过！！！！！！

在这里插入图片描述

枫晨QL

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
Vue实现的一个简单的Demo

一个你可以看得懂的Demo二话不说先看效果！解释一下吧，实现的效果！Punch可以控制红色进度条，Restart就是重新开始。嘻嘻嘻~~~~~，进度条小于等于0时颜色发生Turn down…懂的都懂！！！是时候上才艺了：HTML代码<div id="app"> <div class="bug" :class="{turn:use}"> </div> <div class="bottom"
复制链接

扫一扫