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.事件循环 五.源码 ...
随机推荐
- ASP.NET HTTP 协议
http是无状态的,不会记得“上个请求***”,所以哪怕是同一个页面中的js.css.jpg也都要重复的提交Accept-Language.Accept-Encoding.Cookie等. 一般情况下 ...
- Win8系统本地连接显示为网络2
Win8系统中,当改变了网络环境,本地连接就会被识别为网络2,网络3等: 如果在一个固定的网络环境中,需要修改此名称,可以打开注册表: [HKEY_LOCAL_MACHINE\SOFTWARE\Mic ...
- yum源制作
CentOS7 同步远程镜像 搭建本地yum服务器同步CentOS镜像站点的数据到本地服务器,使用nginx实现http服务向局域网内的其他机器提供yum服务,解决内网yum安装软件的问题. 一.前提 ...
- ubuntu18.04获取root权限并用root用户登录
1.为root设置初始密码 (1)登录系统,打开终端,输入命令:sudo passwd root(使用root权限为root更改密码) (2)设置root密码(建议简单点,没必要那么复杂): (3)重 ...
- MDI窗体容器
Mdi是一个窗体容器控件,直接在新建好的窗体里面,将此窗体设置为Mdi容器,开启了Mdi容器的窗体里面,如果有点击事件打开新窗体,则这些新窗体会在此窗体内部的Mdi容器中打开 操作步骤: 1.首先先新 ...
- kafka 删除topic
两种方法: 一.修改配置文件server.properties 添加如下配置: delete.topic.enable=true 说明:官方给的文档说明“Enables delete topic. D ...
- java 集成友盟推送
原文:https://blog.csdn.net/Athena072213/article/details/83414743 最近应公司业务需求需要完善友盟推送,认真看了官方文档后其实很简单,只需要细 ...
- Linux下怎么创建和进入带有空格的文件夹
有时候需要创建带有空格的文件夹,虽然这不是一个好的习惯,但是偶尔会遇到.用的最多的是很多时候需要进入带有空格的文件夹,如"a b"是一个文件夹名. 创建:mkdir "a ...
- jquery使用post方法传值
1.js代码 <script type="text/javascript"> function addSku(skuId){ var m = $("#m&qu ...
- poj2912(带权并查集+枚举)
题目链接:http://poj.org/problem?id=2912 题意:给n个人,m组关系,玩石头剪刀布的游戏,n个人中除一个人judge以外,其他人属于3个group(即石头.剪刀.布),他们 ...