<!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. 漫谈C指针：参数传递的三道题目

    漫谈C指针:参数传递的三道题目 2009-07-02 开讲之前,我先请你做三道题目.(嘿嘿,得先把你的头脑搞昏才行……唉呀,谁扔我鸡蛋?) 考题一,程序代码如下: [c] view plaincopy ...

  2. SQL Server 生成 数据字典 / 数据库文档

    1. 工具生成 2.SQL语句生成 参考地址:http://blog.csdn.net/qq289523052/article/details/22174721 1.在 表 上右键 - 扩展属性 - ...

  3. 随机数模块 random模块（1）

    1.取随机小数 import random print(random.random()) # (0,1) print(random.uniform(2,3)) # (n,m) 2.取随机整数 impo ...

  4. JAVA语言 第三周

    第三周,跟随菜鸟教程学习了一些简单的JAVA语法,包括数据类型.变量.修饰符.运算符.循环.数组.继承. 这些在结构中与c++相似,但语法有些不同.在这些方面,我做了一些总结. 开学测试那张卷子,被我 ...

  5. 删除kafka topic

    1.因为项目原因,kakfa通道中经常造成数据阻塞,导致kafka通道中数据量过大,因此我需要将kakfa通道中数据清除(个人项目原因,一直使用一个消费者,只要保证当前消费者不在消费之前很久的数据就可 ...

  6. jenkins gradle 实践总结

    执行protoc 通过shell ,那么将gradle 中的proto 项目移除即可 安装 最新的idea 版本 ,并安装 最新kotlin 插件,通过http://plugins.jetbrains ...

  7. target=_blank攻击

    [target=_blank攻击] 在<a>标签中加入 rel="noopener noreferrer" 来避免. 参考:https://mathiasbynens. ...

  8. jQuery 设置/获取样式

    参考 http://www.w3school.com.cn/jquery/jquery_css.asp $("#a").css("height"); $(&qu ...

  9. 【scrapy】爬虫的时候总在提示 KeyError: 'novelLabel'

    调试的时候总是提示 KeyError: 'novelLabel'然后决定断点调试一下, 在def parse_book_list(self, response):方法下,添加print(respons ...

  10. 重建二叉树(python)

    题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7, ...