vue实例
<!--
需求:
背景图片,进度条,减和重置按钮
进度条填满红色,值为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实例的更多相关文章
- Vue - 实例
1.实例属性介绍如下图所示: 具体介绍如下: A.$parent:访问当前组件的父实例 B.$root:访问当前组件的根实例,要是没有的话,则是自己本身 C.$children:访问当前组件实例的直接 ...
- 05-Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- vue实例生命周期
实例生命周期 var vm = new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a i ...
- vue实例的几个概念
1.构造器 vue应用都是通过vue构造函数创建实例来启动的,在创建vue实例时需要传入一个options对象,该对象可以包含数据.模板.挂在元素.方法.生命周期钩子等选项: var vm = new ...
- Vue实例对象的数据选项
前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项 data ...
- vue.js开发环境搭建以及创建一个vue实例
Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...
- Vue 实例中的生命周期钩子
Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...
- v-cloak 实现vue实例未编译完前不显示
前言: 由于网速原因,(ps:之前同事无意间在网速很差的情况下测出的)在使用vue开发时,会由于vue实例还没编译成功的时候数据绑定的"Mustache"标签会闪现一下,造成不好的 ...
- vue实例讲解之axios的使用
本篇来讲解一下axios插件的使用,axios是用来做数据交互的插件. 这篇将基于vue实例讲解之vue-router的使用这个项目的源码进行拓展. axios的使用步骤: 1.安装axios npm ...
- vue实例讲解之vue-router的使用
实例讲解系列之vue-router的使用 先总结一下vue-router使用的基本框架: 1.安装并且引入vue-router 安装:npm install vue-router --save-dev ...
随机推荐
- 利用微软RD Client APP远程连接PC(附外网连接方法)
一.下载RD Client 这个就不用多说了... 二.设置PC允许远程桌面连接 PC系统以win10为例: 1.进入“远程设置”允许远程协助与远程桌面连接 桌面右键单击“此电脑”,属性,单击左边“远 ...
- v4l2框架
参考:https://www.cnblogs.com/tuotuteng/p/4648387.html http://blog.sina.com.cn/s/blog_c91863e60102w65w. ...
- Hadoop 管理工具HUE配置-初始配置
1 界面换成中文 默认是英文的,可以修改为中文 1.修改配置文件settings.pynano hue/desktop/core/src/desktop/settings.py LANGUAGE_CO ...
- C#-记录一些常见的语法特性
C#6.0的一些语法 一.Lambda表达式的一些运用 1.在属性.方法中应用 例如常规对属性的赋值: public bool IsNavigation { get { return this._na ...
- python中Multiprocessing
import multiprocessing as mp #该函数不能有返回值,如果需要则应该将值放在queue中 def job(a,b): print('aaaa') if __name__ == ...
- 给datagridview的下拉框添加valueChange事件
修改datagridview的EditMode属性为EdutOnEnter,否则需要点2次以上才出现下拉框 1.给DataGridView添加EditingControlShowing事件: 2.编辑 ...
- jenkins自动构建站点
jenkins构建iis主要内容, 安装过程百度很多,就不多介绍 看图是主要内容 msbuid功能 1.执行vs的编译过程 2.编译好的文件发布到具体的路径下 批处理功能 1.创建站点 2.创建对应的 ...
- spring事务[转]
https://www.cnblogs.com/cnmenglang/p/6410848.html 先了解事务的7种传播属性: PROPAGATION_REQUIRED -- 支持当前事务,如果当前没 ...
- axios与vue的配合使用事例,实现缓存和重复加载的控制
import Vue from "vue"; import qs from "qs"; import Store from "../vuex/stor ...
- mybatis入门篇:代码生成器(MyBatis Generator)
这篇文章只是按照自己的需要去配置代码生成器,未对所有配置进行讲解,需要了解具体详情的,请到官网查阅文档.传送门:http://www.mybatis.org/generator/ 1.首先引入相关的依 ...