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

点击减按钮后：

进度条减为0后：

点击重置后：

源码：

  1. <!--
    需求：
        背景图片，进度条，减和重置按钮
        进度条填满红色，值为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>
  2.  
  3. <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: {
  4.  
  5.         }
        });
    </script>
  1.  

vue实例的更多相关文章

  1. Vue - 实例

    1.实例属性介绍如下图所示: 具体介绍如下: A.$parent:访问当前组件的父实例 B.$root:访问当前组件的根实例,要是没有的话,则是自己本身 C.$children:访问当前组件实例的直接 ...

  2. 05-Vue入门系列之Vue实例详解与生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  3. vue实例生命周期

    实例生命周期 var vm = new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a i ...

  4. vue实例的几个概念

    1.构造器 vue应用都是通过vue构造函数创建实例来启动的,在创建vue实例时需要传入一个options对象,该对象可以包含数据.模板.挂在元素.方法.生命周期钩子等选项: var vm = new ...

  5. Vue实例对象的数据选项

    前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项 data ...

  6. vue.js开发环境搭建以及创建一个vue实例

    Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...

  7. Vue 实例中的生命周期钩子

    Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...

  8. v-cloak 实现vue实例未编译完前不显示

    前言: 由于网速原因,(ps:之前同事无意间在网速很差的情况下测出的)在使用vue开发时,会由于vue实例还没编译成功的时候数据绑定的"Mustache"标签会闪现一下,造成不好的 ...

  9. vue实例讲解之axios的使用

    本篇来讲解一下axios插件的使用,axios是用来做数据交互的插件. 这篇将基于vue实例讲解之vue-router的使用这个项目的源码进行拓展. axios的使用步骤: 1.安装axios npm ...

  10. vue实例讲解之vue-router的使用

    实例讲解系列之vue-router的使用 先总结一下vue-router使用的基本框架: 1.安装并且引入vue-router 安装:npm install vue-router --save-dev ...

随机推荐

  1. Nodejs+MQTT

    客户端 https://github.com/mqttjs/MQTT.js 服务端 https://github.com/mcollina/mosca ionci3 使用mqtt.js   Brosw ...

  2. 如何找出单链表中的倒数第k个元素

    方法一:快慢指针法 在查找过程中,设置两个指针,初始时指向首元结点(第一个元素结点). 然后,让其中一个指针先前移k步. 然后两个指针再同时往前移动.当先行的指针值为NULL时,另一个指针所指的位置就 ...

  3. (转)Windows 平台下解决httpd.exe: syntax error on line 39

    近来在研究PHP,结果为了Apache的安装伤神不已...小白我在安装后,启动Apache的服务虽然可以,不过,在Apache sevice monitor 中启动services时就会出现如下的问题 ...

  4. jmeter 之beanshell preprocessor

    Bean Shell PreProcessor 可参考https://blog.csdn.net/shimengran107/article/details/76849748 是一个前置处理器,它可以 ...

  5. 报错：Failed on local exception: Host Details : local host is: "master/192.168.52.26"; dest

    报错现象 Failed on local exception: com.google.protobuf.InvalidProtocolBufferException: Protocol message ...

  6. 对话框--pop&dialog总结

    pinguo-zhouwei/CustomPopwindow:(通用PopupWindow,几行代码搞定PopupWindow弹窗(续)): 1,通用PopupWindow,几行代码搞定PopupWi ...

  7. Unity 代码组件获取和使用、Resources加载、OnGUI、Time、Mathf、PlayerPref

    1.     游戏物体组件获取.添加组件(重要) 作业分析: 子弹生成:坦克生成----->坦克控制类里生成子弹 子弹飞行:子弹自己飞,不能通过坦克控制类进行管理: 获取代码组件,设置子弹速度: ...

  8. python 简单图像识别--验证码

    python  简单图像识别--验证码 记录下,准备工作安装过程很是麻烦. 首先库:pytesseract,image,tesseract,PIL windows安装PIL,直接exe进行安装更方便( ...

  9. python网络爬虫学习笔记（二）BeautifulSoup库

    Beautiful Soup库也称为beautiful4库.bs4库,它可用于解析HTML/XML,并将所有文件.字符串转换为'utf-8'编码.HTML/XML文档是与“标签树一一对应的.具体地说, ...

  10. Egret飞行模拟-开发记录01

    1.项目结构简介 1.1 index.html:应用入口文件,我们可以在这里面配置项目的旋转缩放模式背景颜色等. 1.2 egretProperties.json:这个文件里面进行项目配置,包括模块和 ...