根据后端返回值在前端动态做出进度条样式

2021-12-02 约 651 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=121669471

根据后端返回值在前端动态做出进度条样式

1、首先，在js中的data中定义三个变量，分别为已完成的、未完成的，以及两者的比值，默认为0

data: {
  //这里是为了方便看效果随意设置两个数值，实际工作中将返回值赋值即可
	yiWanCheng:4,//已完成的
	zongShu:16,//总数
	percentage:0,//已完成的 / 未完成的 = 百分比
},

2、接着，在vue的计算属性中添加方法

computed:{
	// 根据进度条动态变化宽度，这里的方法名表示为动态宽度
	lineProgress(){
	  const style = {}
	  style.width = this.percentage +'%';
	  return style
	}
},

3、然后，对比值变量做进一步处理

ready: function(){
	var vm = this,
	vm.percentage = vm.yiwancheng / vm.zongShu;
	//toFixed()里面的数值代表精确到小数点后几位小数
	vm.percentage = Number(vm.percentage * 100).toFixed(2);
	return vm.percentage;
},

4、最后，在需要设置的结构中添加动态样式，:style=“方法名”，再通过插值表达式{ { }}将百分比数值展示出来更直观

<div class="correct_progress">
	<span>实验名：</span>
	<div class="progress_bar" title="总数量">
		<!-- 设置一个百分比参数：已批改的/已产生的 -->
		<a href="" class="completed" :style="lineProgress" title="已完成数量"></a>
	</div>
	<span>已完成 {{percentage}} %</span>
</div>

5.也可以直接根据返回的百分比数值设置动态样式

<i class="completed" :style="{'width':item.percentage}" title="已批改的数" ></i>
<i v-if="item.num>0">已完成: {{item.percentage}}</i>
// item.percentage 为后端返回的数据设置成百分比模式的

最后效果就是这样的，百分比跟后端返回值有关，这里是静态数据

喜欢的童鞋点个赞啊哈哈，又来骗赞啦 (*︶ *)

目录

根据后端返回值在前端动态做出进度条样式

根据后端返回值在前端动态做出进度条样式