vue进度条显示进度,vue页面加载进度条

　　本文主要详细介绍Vue的进度条变化的效果。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

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

　　前一波效果图：

　　点击减少后，每次减少10%。

　　缩小到0%后，缩小按钮隐藏。

　　然后再次点击start，回到初始状态。

　　二话不说，编码。

　　！声明文档类型

　　html lang=en

　　头

　　meta charset=UTF-8

　　主页/标题

　　link rel= style sheet href= style . CSS

　　script src= https://cdn . jsdelivr . net/NPM/vue/dist/vue . js /script

　　/头

　　身体

　　div id=vue-app

　　div class=process

　　div v-bind:style= { width:health % } /div

　　/div

　　div class=bu

　　按钮v-on:click=sub v-show=！e 减号/按钮

　　按钮v-on:点击=重置重新开始/按钮

　　/div

　　/div

　　js:

　　脚本src=app.js/script

　　/body

　　/html

　　新Vue({

　　el:#vue-app ，

　　数据：{

　　健康：100，

　　可选择：错误

　　},

　　方法：{

　　sub:函数(){

　　this . health-=10；

　　if(this.health=0){

　　this.eable=true

　　}

　　},

　　重置：函数(){

　　this.health=100

　　this.eable=false

　　}

　　}

　　});

　　CSS:流程{

　　宽度：250px

　　高度：30px

　　边距：0自动；

　　边框：黑色4px纯色；

　　}。流程部门{

　　高度：30px

　　背景：红色；

　　}。bu{

　　宽度：250px

　　边距：20px自动；

　　}。bu按钮{

　　边距：0 20px

　　}

　　简单的实现思路如下：

　　使用v-bind:style将width的值绑定到health。做减法的时候，每次都会减10。当你减去0时，你将隐藏这个按钮。

　　隐藏的时候可以用一个状态变量，根据v-show来控制。当它为真时，它将被显示，当它为假时，它将被隐藏。

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

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。