Vue实现进度条变化效果

2024-10-26 02:39:01

本篇文章用Vue简单实现进度条的变化，供大家参考，具体内容如下

先上一波效果图：

点击减后，每次减百分之十

减到百分之0后，减操作按钮隐藏

然后点击重头开始，恢复到初始状态

二话不说，上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="style.css" >
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">

<div class="process">
    <div v-bind:style="{width: health+'%'}"></div>
</div>

<div class="bu">
    <button v-on:click="sub" v-show="!eable">减</button>
    <button v-on:click="reset">重头开始</button>
</div>

</div>

js：

<script src="app.js"></script>
</body>
</html>
new Vue({
    el:"#vue-app",
    data:{
        health :100,
        eable : false
    },
    methods :{
        sub : function () {
            this.health -= 10;
            if(this.health <= 0){
                this.eable = true;
            }
        },
        reset : function () {
            this.health = 100;
            this.eable = false;
        }

    }
});

CSS:

.process{
    width: 250px;
    height: 30px;

    margin: 0 auto;
    border: black 4px solid;
}

.process div{
    height: 30px;
    background: red;
}

.bu{
    width: 250px;
    margin: 20px auto;
}

.bu button{
    margin: 0 20px;
}

简单的实现思路如下：

用v-bind:style将width的值与health绑定，减的时候每次减10，减到0的时候，将减这个按钮隐藏

隐藏的时候可以使用一个状态变量，根据v-show来控制，为true的时候显示，为false的时候隐藏

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果

一.格式化时间效果图: 实现上述界面代码如下: data() { return { loading: false, demandData: [], demandcount: 0,//总条数 skip: 0, //分页 pageSize: this.LIMIT, columns: [ { title: '编号', width: 60, align: 'center', type: 'index' }, { title: '标签名称', key: 'd_title' }, { title: '创建
vue页面加载时的进度条功能(实例代码)

先看一张图如果我们的程序每次页面切换时,顶部也有一个进度条,那会让用户体验提升很大的. npropgress插件 github地址简单用法 - Vue 项目为例(详细配置,点击上面的github地址查看文档) 最简单的使用方式:vue项目的每次路由切换时,都加载进度条安装 npm install --save nprogress 引入在路由配置文件中引入,写到路由加载前和加载后的两个钩子函数中 // 引入 import NProgress from 'nprogress'; import
Vue进度条progressbar组件功能

效果图首先我们看一下进度条组件运行出来的效果,如下图显示进度条组件实现过程 ◾ 项目搭建 progressbar组件在一个可以直接运行的npm包,通过Yeoman进行构建,再通过Gulp+Webpack构建工具,生成的工作目录如下,其中各个文件夹的内容入之前的一篇文章一样 progressbar组件工作目录 ◾ progressbar源文件之template progressbar组件表现为.vue文件的形式,其中template部分内容如下 progressbar源文件template部
Vue实现带进度条的文件拖动上传功能

1. 基本界面 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1
vue2.0实现音乐/视频播放进度条组件

基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释,具体内容如下需求分析: ①:进度条随着歌曲的播放延长,歌曲播放完时长度等于黑色总进度条长度:时间实时更新. ②:当滑动按钮时,实时更新播放时间,橙色进度条长度也会随着按钮的滑动而改变,当滑动结束时,橙色区域停留在滑动结束的位置,歌曲从当前进度开始播放. ③:点击进度条,橙色进度条长度变为点击处至起点的长度,并从当前点开始播放歌曲. 大概思路: ①:左边的时间可以通过audio播放时派发的timeupdate事件获取,右边的时间为接口
vue实现简单loading进度条

刚学习vue不久,今天试着用vue做了一个简单的loading进度条,对于vue的生命周期和钩子函数又有了新的理解,下面分享给大家,绝对入门级. 一.进度条原理这个就很简单了,也是我们经常可以用到的,这里只做一个最简单的,页面刷新自动加载进度条.主要是让进度条的width不断增加至100%就可以啦~好了,进入正题. 二.jquery实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset
vue组件实现进度条效果

本文实例为大家分享了vue实现进度条效果的具体代码,供大家参考,具体内容如下一.效果图二.代码 progress-bar.vue <template> <div class="vue-progress-bar default-theme"> <div class="vue-progress-bar__tip"> <span class="vue-progress-bar__tiplabel">{
在vue项目中使用Nprogress.js进度条的方法

NProgress.js提供页面加载进度条效果,当页面打开加载时,在页面顶部会出现进度条加载动画.NProgress.js是轻量级的进度条组件,使用简便,可以很方便集成到单页面应用中. Ajaxyy应用程序的细长进度条.灵感来自Google,YouTube和Medium. 在vue中使用nprogress.js 安装 $ bower install --save nprogress $ npm install --save nprogress 在项目中引入在main.js中引入要使用的npro
vue.js+ElementUI实现进度条提示密码强度效果

要求一:判断输入的字符串是否包含数字.小写字母.大写字母以及特殊字符四种内容的8-20位字符通过搜索了解到可以使用?=这个正则语法判断字符串中是否含有多种内容.(?=)这个语法结构在正则里表示"设定后面是"的意思,举下面几个例子进一步了解?=这个语法: (?=.*[a-zA-Z]) 这句的意思就是后面必须有一位大写或小写字母 (?=.*[1-9]) 这句的意思是后面必须有一位数字 (?=.*[\W]) 这句的意思是后面必须有一个非字母数字及下划线的特殊符号 (?!.*[\u4E00
vue开发拖拽进度条滑动组件

分享一个最近写的进度条滑动组件,以前都是用jq写,学会了vue,尝试着拿vue来写觉得非常简单,代码复用性很强! 效果图如下: 调用组件如下: <slider :min=0 :max=100 v-model = "per"></slider> <template> <div class="slider" ref="slider"> <div class="process"

Vue实现进度条变化效果

相关推荐

随机推荐