vue之综合Demo：打沙袋
demo7.html
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-html="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue Demo</title>
<!--自选版本-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>-->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="app">
<h2>综合Demo</h2>
<!--图片-->
<div id="bag" v-bind:class="{burst:ended}"></div> <!--进度情况-->
<div id="bag-health">
<div v-bind:style="{width: health + '%' }">
</div>
</div> <h3 v-show="ended" align="center">
沙袋被你打坏了！
</h3>
<!--控制按钮-->
<div id="controls">
<button v-on:click="punch" v-show="!ended">使劲敲打</button>
<button v-on:click="restart">重新开始</button>
</div> </div>
<script src="app.js"></script>
</body>
</html>
app.js
var app = new Vue({
el: '#app',
data: {
health: 100,
ended: false,
},
methods: {
punch: function () {
this.health -= 25;
if (this.health <= 0) {
this.ended = true;
// alert("被你打坏了！你真棒！")
}
},
restart: function () {
this.health = 100;
this.ended = false;
}
},
computed: {}
})
style.css
#bag {
width: 200px;
height: 500px;
margin: 0 auto;
background: url("pic/sha1.png") center no-repeat;
background-size: 80%;
}
#bag.burst {
background-image: url("pic/sha2.png");
}
#bag-health {
width: 200px;
border: 2px #000 solid;
margin: 0 auto 20px auto;
}
#bag-health div {
height: 20px;
background: greenyellow;
}
#controls {
width: 200px;
margin: 0 auto;
}
#controls button {
margin-left: 20px;
}
截图：
vue之综合Demo：打沙袋的更多相关文章
- Vue异步组件Demo
Vue异步组件Demo 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了进一步简化,Vue.js 允许将组件定义为一个工厂函数,异步地解析组件的定义.Vue.js 只在组件需要 ...
- 一个基于vue的仪表盘demo
最近写了一个基于vue的仪表盘,其中 主要是和 transform 相关的 css 用的比较多.给大家分享一下,喜欢的话点个赞呗?嘿嘿 截图如下: 实际效果查看地址:https://jhcan333. ...
- vue传值(小demo)
vue+element ui实现的.解释大多在代码中(代码臭且长,有错误请指正)-- 代码如下: <template> <div class="userList" ...
- vuecli脚手架+vue+vuex实现vue驱动的demo。
哎呀呀呀,现在大家都要会Vue || React,否则感觉跟这个前端的世界脱节了一样. start: vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-de ...
- vue拼图动画Demo
这是一个基于vue的Demo,可以实现拼图动画,但是具体的没有写拼图成功的逻辑,鼠标悬停移动.周期刷新 我把它放到的我的博客园界面上了.刷新界面可以看到. 演示地址 :https://liruilon ...
- vue 拍照上传图片 demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 开发vue单页面Demo
第1步:安装webpack脚手架 npm install webpack -g (全局安装) (新电脑启动npm run dev版本报错,是因为webpack-server版本更新的问题,要安装pac ...
- vue JointJS 实例demo
前言 越来越发现,前端深入好难哦!虐成渣渣了. 需求:前端绘制灵活的关系图(此demo还是简单的,我的需求才跨出一小步) 安装 npm install jointjs 容器,工具栏 <templ ...
- Vue.js 综合
<!DOCTYPE HTML> <html> <head> <title>vue.js 处理用户输入</title> <script ...
随机推荐
- 随机产生1-12的整数 ， 根据产生整数输出一下该月份的季节信息（Math.random()和if语句的应用）
package com.summer.cn; /** * @author Summer *随机产生1-12的整数 , 根据产生整数输出一下该月份的季节信息 */ public class Test04 ...
- java 基础03 继承
- Spark官方调优文档翻译（转载）
Spark调优 由于大部分Spark计算都是在内存中完成的,所以Spark程序的瓶颈可能由集群中任意一种资源导致,如:CPU.网络带宽.或者内存等.最常见的情况是,数据能装进内存,而瓶颈是网络带宽:当 ...
- GC调优在Spark应用中的实践（转载）
Spark是时下非常热门的大数据计算框架,以其卓越的性能优势.独特的架构.易用的用户接口和丰富的分析计算库,正在工业界获得越来越广泛的应用.与Hadoop.HBase生态圈的众多项目一样,Spark的 ...
- Centos 7安装RabbitMQ 3.7.8版本(单机版)-不使用RPM
RabbitMQ是目前非常热门的消息中间件,凭借其高可靠.高扩展.高可用及丰富的功能特性:TTL.死信队列.延迟队列.优先级队列.消息持久化.镜像队列. 消息中间件是指利用高效可靠的消息传递机制进行与 ...
- 无线网络中信噪比(SNR)计算
信噪比(S/N)＝log[信号功率密度/噪声功率密度] a ＝log[信号功率密度]-log[噪声功率密度] 例如,接收端的信号功率密度为-63dBm,噪声的信号功率密度为-95dBm,则: 信噪比( ...
- 固态硬盘的PCIE，SATA，M2，NVMe，AHCI分别都指什么？别再搞混了
原文:https://baijiahao.baidu.com/s?id=1616207956596122967&wfr=spider&for=pc 科技娱乐屋 18-11-0420:5 ...
- Python_装饰器习题_31
# 1.编写装饰器,为多个函数加上认证的功能(用户的账号密码来源于文件), # 要求登录成功一次,后续的函数都无需再输入用户名和密码 FLAG = False def login(func): def ...
- Stack Sorting CodeForces - 911E （思维+单调栈思想）
Let's suppose you have an array a, a stack s (initially empty) and an array b (also initially empty) ...
- Eclipse中Git的使用以及IDEA中Git的使用
一.Eclipse中Git解决冲突步骤: 1.进行文件对比,将所有的文件添加到序列. 2.commit文件到本地仓库. 3.pull将远程仓库的代码更新到本地,若有冲突则会所有的文件显示冲突状态(真正 ...