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. Eclipse中利用JSP把mysql-connector-java-8.0.13.jar放到WebContent\WEB-INF\lib中连接MySQL数据库时Connection conn = DriverManager.getConnection(url,username,password)报错的解决办法

    开发环境: 1.系统:windows 7/8/10均可 2.jdk:1.8.0_144 3.服务器:apache-tomcat-9.0.8 4.IDE:eclipse+jsp 0.网页代码如下: &l ...

  2. mysql存储引擎之MyISAM 和 InnoDB的比较

    一.什么是存储引擎 存储引擎说白了就是如何存储数据.如何为存储的数据建立索引和如何更新.查询数据等技术的实现方法.因为在关系数据库中数据的存储是以表的形式存储的,所以存储引擎也可以称为表类型(即存储和 ...

  3. easyui的浮动panel不跟随所在页面一起滚动的问题

    项目开发中遇到一个很奇怪的现象就是:随便点开一个下拉控件,包括combo,combobox,databox,combogird等等,都会出现点开的panel面板正常,如果页面有滚动条,一用鼠标滚轮滚动 ...

  4. [翻译] C# 8.0 新特性

    原文: Building C# 8.0 [译注:原文主标题如此,但内容大部分为新特性介绍,所以意译标题为 "C# 8.0 新特性"] C# 的下一个主要版本是 8.0.我们已经为它 ...

  5. mysql 库 行 列的 操作使用

    -----------------------------------------------------------------------------时间不等你,下一刻,全是新的.每一刻都让它变得 ...

  6. OO博客作业2：第5-7周作业总结

    (1)从多线程的协同和同步控制方面,分析和总结自己三次作业来的设计策略及其变化. 第5次作业:多线程电梯 基本照搬了课件上“生产者-消费者”模型的设计策略,将InputHandler设计为生产者线程, ...

  7. 字符串的查找KMP

    基本思想,当出现不匹配的时候,就知晓一部分文本内容(因为在匹配失败前已经发生匹配) P[0 ~ k-1] == P[j-k ~ j-1] //KMP #include<iostream> ...

  8. 详解ES5和ES6的继承

    ES5继承 构造函数.原型和实例的关系:每一个构造函数都有一个原型对象,每一个原型对象都有一个指向构造函数的指针,而每一个实例都包含一个指向原型对象的内部指针, 原型链实现继承 基本思想:利用原型让一 ...

  9. C. Prefixes and Suffixes

    链接 [https://codeforces.com/contest/1092/problem/C] 题意 给你某个字符串的长度n,再给你2*n-2个前缀或者后缀 让你判断那些是前缀那些是后缀 关键是 ...

  10. ~/.bashrc与/etc/profile的区别

    ~/.bashrc:该文件包含专用于某个用户的bash shell的bash信息,当该用户登录时以及每次打开新的shell时,该文件被读取. /etc/profile中设定的变量(全局)的可以作用于任 ...