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. 3-jsp 内置对象、转发与重定向

    1.request:请求常用api: getParameter("name"):获取页面表单单个元素的值 getParameterValues("name"): ...

  2. （二 -4） 天猫精灵接入Home Assistant-自动发现Mqtt设备--传感器系列

    https://www.home-assistant.io/blog/2015/10/11/measure-temperature-with-esp8266-and-report-to-mqtt/ 最 ...

  3. 14 python初学（高阶函数 递归函数 内置函数）

    高阶函数:1.  函数名是一个变量,函数名可以进行赋值 2. 函数名可以作为函数参数,还可以作为函数返回值(函数名称作为函数返回值时返回的是:函数的地址:print 这个返回值的调用相当于执行这个函数 ...

  4. ActiveMQ安装配置及使用 转发 https://www.cnblogs.com/hushaojun/p/6016709.html

    ActiveMQ安装配置及使用 ActiveMQ介绍 ActiveMQ 是Apache出品,最流行的,能力强劲的开源消息总线.ActiveMQ 是一个完全支持JMS1.1和J2EE 1.4规范的 JM ...

  5. 串行FLASH文件系统FatFs---转自野火论坛

    为了支持长文件名,需要用到FATFS源码中的cc936.c的两个函数ff_convert,ff_wtoupper:这里面直接用了两个大数组(127KB)来做unicode转gbk(OEM)的对照表,这 ...

  6. 两个select之间的元素互相移动并保持顺序

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  7. 如何选择分布式事务形态（TCC，SAGA，2PC，补偿，基于消息最终一致性等等）

    各种形态的分布式事务 分布式事务有多种主流形态,包括: 基于消息实现的分布式事务 基于补偿实现的分布式事务(gts/fescar自动补偿的形式) 基于TCC实现的分布式事务 基于SAGA实现的分布式事 ...

  8. 体验usually.js的管道函数——pipe函数

    体验usually.js的管道函数——pipe函数 usually.js 是一个面向现代 Web 开发的 JavaScript 函数库,基于 ES6 开发.最新版本2.4.1,最新版本usually. ...

  9. H5 28-优先级之权重问题

    28-优先级之权重问题 我是段落 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  10. Linux下安装redis的详细过程（redis版本为4.0.10）

    1.安装redis步骤 1.推荐进入到linux路径/usr/local/src 2.$ wget http://download.redis.io/releases/redis-4.0.10.tar ...