<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <link rel="stylesheet" type="text/css" href="vue.css">
     <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
     <div id="vue-app">
         <!--图片-->
         <div id="bag"  v-bind:class="{burst:ended}"></div>

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

             <!--<div style="width: 60%;"></div>-->
         </div>

         <!--控制按钮-->
         <div id="">
             <button v-on:click="punch" v-show="!ended">用力敲</button>
             <button v-on:click="restart">重新开始</button>
         </div>
     </div>

     <script src="app.js"></script>
 </body>
 </html>

HTML

 new Vue({
     el:'#vue-app',
     data:{
         health:0,
         ended:false
     },
     methods:{
         punch:function(){

             this.health+=10;
             if(this.health >= 100){
                 this.ended=true;
             }
         },
         restart:function(){

             this.health=0;
             this.ended=false;
         }
     },
     computed:{

     }
 })

Vue.js

#bag{
    width:200px;
    height: 500px;
    margin: 0 auto;
    background:url(bag.png) center no-repeat;
    background-size:80%;
    background-color:orange;
}
#bag.burst{
    background:url("") center no-repeat;
}
#bag-health{
    width: 200px;
    border:2px #000 solid;
    margin 0 auto 20px auto;
}

#bag-health div{
    height:20px;
    background:crimson;
}

#controls{
    width:120px;
    margin:0 auto;
}

CSS

Vue 进度条 和 图片的动态更改的更多相关文章

  1. Android 进度条改变图片透明度

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  2. C# winform带进度条的图片下载

    代码如下: public partial class FrmMain : Form { public FrmMain() { InitializeComponent(); } private void ...

  3. 手把手教你实现一个 Vue 进度条组件！

    最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...

  4. Android课程---用进度条改变图片透明度

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  5. Android实现拖动进度条改变图片透明度

    layout文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:an ...

  6. OLED的波形曲线、进度条、图片显示（STM32 HAL库 模拟SPI通信 5线OLED屏幕）详细篇

    少废话,先上效果图 屏幕显示效果         全家福 一.基础认识及引脚介绍 屏幕参数: 尺寸:0.96英寸 分辨率:128*64 驱动芯片:SSD1306 驱动接口协议:SPI 引脚说明: 二. ...

  7. andorid 进度条和图片的透明度

    layout.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:a ...

  8. Android——进度条控制图片透明度

    xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android= ...

  9. Qt实现炫酷启动图-动态进度条

    目录 一.简述 二.动效进度条 1.光效进度条 2.延迟到达进度条 3.接口说明 三.启动图 1.实现思路 2.背景图切换 四.测试 1.构造启动图 2.背景图 3.其他信息 4.事件循环 五.源码 ...

随机推荐

  1. eclipse 访问GitHub 问题

  2. NFS 网络文件系统制作

    1. 构建根文件系统主要是建立相关的文件目录,以及各目录下相关的配置文件.管理工具等. 2. 首先创建文件目录. mkdir rootfs cd rootfs mkdir bin dev etc li ...

  3. java aop的理解

    https://www.cnblogs.com/mafly/p/SpringAOP.html

  4. CSS Media Query

    [CSS Media Query] CSS Media Queries are a feature in CSS3 which allows you to specify when certain C ...

  5. c# 用户页面

    第一步: 第二步: 第三步: 结果:

  6. 自定义sql server 聚合涵数

    using System; using System.Data; using System.Data.SqlClient; using System.Data.SqlTypes; using Micr ...

  7. dubbo 实战

    dubbo 官网:http://dubbo.apache.org/zh-cn/docs/user/quick-start.html dubbo-admin 下载 : https://github.co ...

  8. django创建一个简单的web站点

    一.新建project 使用Pycharm,File->New Project…,选择Django,给project命名 (project不能用test命名)   新建的project目录如下: ...

  9. input type='number'时，maxlength属性无效

    <input type="number" oninput="if(value.length>11)value=value.slice(0,11)"  ...

  10. Android 实现简单 倒计时60秒，一次1秒

    倒计时功能如上图所示,其实就几行代码即可实现效果啦!!! /** 倒计时60秒,一次1秒 */ CountDownTimer timer = new CountDownTimer(60*1000, 1 ...