Vue 进度条 和 图片的动态更改
<!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 进度条 和 图片的动态更改的更多相关文章
- Android 进度条改变图片透明度
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- C# winform带进度条的图片下载
代码如下: public partial class FrmMain : Form { public FrmMain() { InitializeComponent(); } private void ...
- 手把手教你实现一个 Vue 进度条组件!
最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...
- Android课程---用进度条改变图片透明度
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- Android实现拖动进度条改变图片透明度
layout文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:an ...
- OLED的波形曲线、进度条、图片显示(STM32 HAL库 模拟SPI通信 5线OLED屏幕)详细篇
少废话,先上效果图 屏幕显示效果 全家福 一.基础认识及引脚介绍 屏幕参数: 尺寸:0.96英寸 分辨率:128*64 驱动芯片:SSD1306 驱动接口协议:SPI 引脚说明: 二. ...
- andorid 进度条和图片的透明度
layout.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:a ...
- Android——进度条控制图片透明度
xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android= ...
- Qt实现炫酷启动图-动态进度条
目录 一.简述 二.动效进度条 1.光效进度条 2.延迟到达进度条 3.接口说明 三.启动图 1.实现思路 2.背景图切换 四.测试 1.构造启动图 2.背景图 3.其他信息 4.事件循环 五.源码 ...
随机推荐
- iOS修改状态栏颜色
application.statusBarStyle = .LightContent // 在APPlication中设置全局状态栏颜色,为白色 application.statusBarHidden ...
- 吴裕雄 python神经网络 水果图片识别(4)
# coding: utf-8 # In[1]:import osimport numpy as npfrom skimage import color, data, transform, io # ...
- python import sklearn出错 "ImportError: DLL load failed: 找不到指定的模块。
安装好sklearn模块后,import的时候出现了以下错误: 但是确实已经装好了,百思不得其解,网上查找之后发现,出现错误原因:安装包的来源问题,也可以理解为包版本兼容问题,有的包使用官方出版,有的 ...
- tensorflow中run和eval的区别(转)
在tensorflow中,eval和run都是获取当前结点的值的一种方式. 在使用eval时,若有一个 t 是Tensor对象,调用t.eval()相当于调用sess.run(t) 一下两段代码等效: ...
- hdu3826-Squarefree number-(欧拉筛+唯一分解定理)
Squarefree number Time Limit: 10000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...
- 初始C语言中的指针(翁凯男神MOOC)
运算符 & ● scanf("%d",&i); ●获得变量的地址,它的操作数必须是变量 ● int i; printf("%x",& ...
- vue.js入门操作
1.vue框架是经典的MVVM模式, .vue文件是模板文件模板文件又分为3个部分一 <template></template>(html部分)二 <script> ...
- js原型、原型链、作用链、闭包全解
https://www.2cto.com/kf/201711/698876.html [对象.变量] 一个对象就是一个类,可以理解为一个物体的标准化定义.它不是一个具体的实物,只是一个标准.而通过对象 ...
- java中excel导入\导出工具类
1.导入工具 package com.linrain.jcs.test; import jxl.Cell; import jxl.Sheet; import jxl.Workbook; import ...
- 11.8java课后动手动脑
package 动手动脑; import javax.swing.*; class AboutException { public static void main(String[] a) { int ...