<!--
需求：
    背景图片，进度条，减和重置按钮
    进度条填满红色，值为100%，点击减时，进度条依次减十，减到0时换一张背景图片，减按钮消失，点击重置按钮时，进度条重新填满红色
-->
效果图：

点击减按钮后：

进度条减为0后：

点击重置后：

源码：

<!--
需求：
    背景图片，进度条，减和重置按钮
    进度条填满红色，值为100%，点击减时，进度条依次减十，减到0时换一张背景图片，减按钮消失，点击重置按钮时，进度条重新填满红色
-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>testUI</title>
    <script src="vue/vue.js"></script>
    <style>
        #picture{/*背景图片*/
            background:url("smallPicture.png") no-repeat;
            margin:0 auto;
            width:250px;
            height:100px;
        }
        #progress{/*进度条框*/
            width:200px;
            height:30px;
            border:solid 1px black;
            margin:0 auto;
        }
        #progress div{/*进度条内部红色div*/
            width:100%;
            height:30px;
            background-color: red;
        }
        #button{/*减和重置按钮*/
            width:100px;
            height:200px;
            margin:0 auto;
            margin-top:30px;
        }
        #picture.burst{/*重新更换的一个背景图片*/
            background:url("black.jpg") no-repeat;
        }
    </style>
</head>
<body>
<div id="vue">
    <div id="picture" v-bind:class="{burst:ended}"></div>
    <div id="progress" >
        <div v-bind:style={width:score+"%"}></div>
    </div>
    <div id="button">
        <button v-on:click="desc" v-show="!ended">减</button><!--点击依次减10，开始时按钮显示，当进度条红色为0时，ended标为true，减按钮消失-->
        <button v-on:click="restart">重置</button><!--点击重置按钮时，进度条红色重置为100%-->
    </div>
</div>
</body>
</html>

<script>
    new Vue({
        el: "#vue",
        data: {
            score:100,
            ended:false//用作正确与否作为判断
        },
        methods: {//减方法
            desc:function(){
                this.score-=10;
                if(this.score==0){//如果进度条内部的红色为0了，则将ended的值改为true
                    this.ended=true;
                }
            },//重置方法
            restart:function(){
                this.score=100;
            }
        },
        computed: {

        }
    });
</script>
												


											
vue实例的更多相关文章
	

    
						
  1. Vue - 实例
		
    1.实例属性介绍如下图所示: 具体介绍如下: A.$parent:访问当前组件的父实例 B.$root:访问当前组件的根实例,要是没有的话,则是自己本身 C.$children:访问当前组件实例的直接 ...
    
		
    2. 
						
  2. 05-Vue入门系列之Vue实例详解与生命周期
		
    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
    
		
    3. 
						
  3. vue实例生命周期
		
    实例生命周期 var vm = new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a i ...
    
		
    4. 
						
  4. vue实例的几个概念
		
    1.构造器 vue应用都是通过vue构造函数创建实例来启动的,在创建vue实例时需要传入一个options对象,该对象可以包含数据.模板.挂在元素.方法.生命周期钩子等选项: var vm = new ...
    
		
    5. 
						
  5. Vue实例对象的数据选项
		
    前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项 data  ...
    
		
    6. 
						
  6. vue.js开发环境搭建以及创建一个vue实例
		
    Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js  ...
    
		
    7. 
						
  7. Vue 实例中的生命周期钩子
		
    Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...
    
		
    8. 
						
  8. v-cloak 实现vue实例未编译完前不显示
		
    前言: 由于网速原因,(ps:之前同事无意间在网速很差的情况下测出的)在使用vue开发时,会由于vue实例还没编译成功的时候数据绑定的"Mustache"标签会闪现一下,造成不好的 ...
    
		
    9. 
						
  9. vue实例讲解之axios的使用
		
    本篇来讲解一下axios插件的使用,axios是用来做数据交互的插件. 这篇将基于vue实例讲解之vue-router的使用这个项目的源码进行拓展. axios的使用步骤: 1.安装axios npm ...
    
		
    10. 
						
  10. vue实例讲解之vue-router的使用
		
    实例讲解系列之vue-router的使用 先总结一下vue-router使用的基本框架: 1.安装并且引入vue-router 安装:npm install vue-router --save-dev ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. 使用phpunit测试yaf项目操作步骤
			
    yaf + phpunit 使用phpunit对yaf进行测试的核心在于bootstrip文件的配置. *1. 首先在项目目录下创建tests文件,并在tests中创建phpunit.xml < ...
    
			
    2. 
						
  2. sum(case when ct.tradeTotal >= 0 then 1 else 0 end)的意思
			
    String hql = "select new com.ks.admin.report.dto.ReportMonthWithDrawalDto(" + "count( ...
    
			
    3. 
						
  3. 微软MSDN原版Windows Server 2008 R2 With SP1下载
			
    Windows Server 2008 R2是windows 服务器版本Windows Server 2008 R2继续提升了虚拟化.系统管理弹性.网络存取方式,以及信息安全等领域的应用,其中有不少功 ...
    
			
    4. 
						
  4. LAB1 partV
			
    partV 创建文档反向索引.word -> document 与 前面做的 单词统计类似,这个是单词与文档位置的映射关系. mapF 文档解析相同,返回信息不同而已. reduceF 返回归约 ...
    
			
    5. 
						
  5. 关于栈、队列、优先队列的应用——UVa11995
			
    这本来是上一篇博客里的内容,但不知道什么原因breakdown了……我就简单放上一道题好了 题意:这道题的题目是“猜猜数据结构”,题意就是给你一些输入输出数据,让你根据这些数据判断是什么数据结构.要猜 ...
    
			
    6. 
						
  6. 设计模式之Factory Method模式
			
    作用:将实例的生成交给子类 用Template Method模式来构建生成实例的工厂,这就是Factory Method模式. 在Factory Method中,父类决定实例的生成方式,但并不决定所要 ...
    
			
    7. 
						
  7. 7.6.2 break 语句
			
    7.6.2 break 语句 程序执行到循环中的break语句时,会种植包含它的循环,并继续执行下一阶段. 如果break语句位于嵌套循环内,它只会影响包含它的当前循环. break还可用于因其他原因 ...
    
			
    8. 
						
  8. 刘志梅2017710101152.《面向对象程序设计（java）》第十一周学习总结
			
    实验十一   集合 实验时间 2018-11-8 1.实验目的与要求 (1) Java最初版本只为最常用的数据结构提供了很少的一组类:Vector.Stack.Hashtable.BitSet与Enu ...
    
			
    9. 
						
  9. 用antd和webview打造一款大数据客户端程序
			
    要想提高工作效率,必须得有好的工具.大数据有很多组件,但是邪了门儿的就是,竟然没有一个好用的客户端程序. 没办法,我只好用antd+webview自己做了一款跨平台的桌面应用. 先看下效果. 这是gi ...
    
			
    10. 
						
  10. asp微信支付代码证书文件post_url.aspx和post_url.aspx.cs源码下载
			
    很多朋友在网上找的asp支付代码中都没有这两个证书文件,只能是用别人的,但是如果别人把他的网站这个文件删了,你的支付也就不能用了,今天我就把大家需要的这两个asp微信支付代码证书文件post_url. ...
    
			
    11.