vue系列文章（10）vue实战项目demo

最新推荐文章于 2024-05-25 09:33:14 发布

互联网极客

最新推荐文章于 2024-05-25 09:33:14 发布

阅读量878

点赞数

分类专栏： ----前端开发

本文链接：https://blog.csdn.net/jsqfengbao/article/details/94740727

版权

----前端开发专栏收录该内容

32 篇文章 3 订阅

订阅专栏

我们要实现的图类似于下面的这样：

点击使劲敲，下面的进度条进行减少，敲完后出现下面的图片。同时使劲敲的button消失，恢复原状后变成最上面的图。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
	
</head>
<body>
	<div id="app">
		<h1>vue demo案例一</h1>
		<div id="bag" v-bind:class="{burst: ended}">
			
		</div>

		<div id="bag-health">
			<div v-bind:style="{width: health +'%'}"></div>
		</div>

		<div id="control">
			<button v-on:click="punch" v-show="!ended">
				使劲敲
			</button>
			<button v-on:click="restart">
				恢复原状
			</button>
		</div>
	</div>
	<script type="text/javascript" src="app.js"></script>
</body>
</html>

app.js

new Vue({
	el: '#app',
	data: {
		health: 100,
		ended: false
	},
	methods: {
		punch: function() {
			this.health -= 20;
			if(this.health <= 0){
				console.log(this.ended)
				this.ended = true;
			}
		},
		restart: function() {
			this.health = 100;
			this.ended = false;
		}
	},
	computed: {
		
	}
});

style.css

#bag {
	width: 200px;
	height: 500px;
	margin: 0 auto;
	background: url(img/bag.png) center no-repeat;
	background-size: 80%;
}
#bag.burst {
	background-image: url(img/bag-burst.png);
}
#bag-health{
	width: 200px;
	border: 2px #000 solid;
	margin: 0 auto 20px auto;
}
#bag-health div{
	height: 20px;
	background: crimson;
}
	
#control{
	width: 200px;
	margin: 0 auto;

}	
#control button{
	margin-left: 20px;
}

Vue系列文章目录

如果上面文章对你有用，打赏下我吧@*@

互联网极客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue系列文章（10）vue实战项目demo

我们要实现的图类似于下面的这样：点击使劲敲，下面的进度条进行减少，敲完后出现下面的图片。同时使劲敲的button消失，恢复原状后变成最上面的图。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue.js</ti...
复制链接

扫一扫