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:打沙袋的更多相关文章

  1. Vue异步组件Demo

    Vue异步组件Demo 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了进一步简化,Vue.js 允许将组件定义为一个工厂函数,异步地解析组件的定义.Vue.js 只在组件需要 ...

  2. 一个基于vue的仪表盘demo

    最近写了一个基于vue的仪表盘,其中 主要是和 transform 相关的 css 用的比较多.给大家分享一下,喜欢的话点个赞呗?嘿嘿 截图如下: 实际效果查看地址:https://jhcan333. ...

  3. vue传值(小demo)

    vue+element ui实现的.解释大多在代码中(代码臭且长,有错误请指正)-- 代码如下: <template>  <div class="userList" ...

  4. vuecli脚手架+vue+vuex实现vue驱动的demo。

    哎呀呀呀,现在大家都要会Vue ||  React,否则感觉跟这个前端的世界脱节了一样. start: vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-de ...

  5. vue拼图动画Demo

    这是一个基于vue的Demo,可以实现拼图动画,但是具体的没有写拼图成功的逻辑,鼠标悬停移动.周期刷新 我把它放到的我的博客园界面上了.刷新界面可以看到. 演示地址 :https://liruilon ...

  6. vue 拍照上传图片 demo

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 开发vue单页面Demo

    第1步:安装webpack脚手架 npm install webpack -g (全局安装) (新电脑启动npm run dev版本报错,是因为webpack-server版本更新的问题,要安装pac ...

  8. vue JointJS 实例demo

    前言 越来越发现,前端深入好难哦!虐成渣渣了. 需求:前端绘制灵活的关系图(此demo还是简单的,我的需求才跨出一小步) 安装 npm install jointjs 容器,工具栏 <templ ...

  9. Vue.js 综合

    <!DOCTYPE HTML> <html> <head> <title>vue.js 处理用户输入</title> <script ...

随机推荐

  1. 009_npm常用命令参数总结

    npm是什么 NPM的全称是Node Package Manager,是随同NodeJS一起安装的包管理和分发工具,它很方便让JavaScript开发者下载.安装.上传以及管理已经安装的包. 一.np ...

  2. oracle(环境搭建二)

    Configuration oracle database Password file(非必要)        cd $ORACLE_HOME/dbs/ ls 查看是否有init.ora 创建密码文件 ...

  3. python内建的命名空间研究

    python内建的命名空间研究 说明: python内置模块的命名空间.python在启动的时候会自动为我们载入很多内置的函数.类,比如 dict,list,type,print,这些都位于 __bu ...

  4. Fiddler抓包和修改WebSocket数据,支持wss

    记录一下用Fiddler对WebSocket收发的数据进行抓包分析和篡改数据,只找到这么一个方法,能用就行吧. 时间:2019-3-29 环境: win7 + Fiddler 5.0 Fiddler抓 ...

  5. centos中docker的安装

    之前学习docker的时候,是在windows上直接使用可执行文件安装的,最近需要在自己的服务器上安装docker,特此了解了一下如何安装,这里补一下. 小白学Docker之基础篇 小白学Docker ...

  6. UVA-10375 唯一分解定理

    #include<iostream> #include<string.h> #include<algorithm> #include<math.h> # ...

  7. 第十二届湖南省赛 (B - 有向无环图 )(拓扑排序+思维)好题

    Bobo 有一个 n 个点,m 条边的有向无环图(即对于任意点 v,不存在从点 v 开始.点 v 结束的路径). 为了方便,点用 1,2,…,n 编号. 设 count(x,y) 表示点 x 到点 y ...

  8. python实现满二叉树递归循环

    一.二叉树介绍点这片文章 二叉树及题目介绍 例题: 有一颗满二叉树,每个节点是一个开关,初始全是关闭的,小球从顶点落下, 小球每次经过开关就会把它的状态置反,这个开关为关时,小球左跑,为开时右跑.现在 ...

  9. 会议室预订系统(meeting room booking system)

    一.mrbs mrbs:(meeting room booking system) 二.效果   三.models from django.db import models # Create your ...

  10. SQL server 生成数据字典

    Set nocount on ), ) DECLARE Tbls CURSOR FOR ),isnull(g.[value],'-')) AS TABLE_COMMENT FROM INFORMATI ...