vue.js实现砍价进度条（超详细）

很简单，我们这里直接上代码了，亲测可用

主要代码： <progress v-bind:value="cuts" max="100" class="cut_progress"></progress>

progress 标签

<div class="cut_ope">
    <progress v-bind:value="cuts" max="100" class="cut_progress"></progress>
    <div class="cut_money">
        <span>已砍<label v-text="yikan">18.05</label>元</span>
        <span>还可砍掉<label v-text="kekan">5.25</label>元</span>
	</div>
</div>

css

.cut_progress {
    width: 100%;
    height: 0.26rem;
    background: #eee;
    border-radius: 0.2rem;
}
/* 表示总长度背景色 */
.cut_progress::-webkit-progress-bar{
    background: #eee;
    border-radius: 0.2rem;
}
/* 表示已完成进度背景色 */
.cut_progress::-webkit-progress-value{
    background-image: linear-gradient(#fcc943, #f48213);
    border-radius: 0.2rem;
}
.cut_money {
          overflow: hidden;
        }
        .cut_money span {
          font-size: 0.28rem;
          color: #f12816;
          float: left;
        }
        .cut_money span:nth-child(2) {
          float: right;
          color: #333;
        }

js

var vm = new Vue({

    el: "#app",
    data: {
        cuts: "",
    },
    methods: {

      //获取数据
      init: function() {
        api.ajax({
					url: "",
					method: 'post',
					data: {
						values: {
							token: vm.token,
						}
					}
				}, function(ret, err) {
            if (ret.code == 'success') {
              vm.user_avatar = ret.data.user_avatar;
              vm.user_nickname = ret.data.user_nickname;
              vm.goods_name = ret.data.goods_name;
              vm.youhui = ret.data.youhui;
              vm.yikan = ret.data.yikan;
              vm.kekan = ret.data.kekan;
              vm.bouns_code = ret.data.bouns_code;
              vm.add_time = ret.data.add_time;
              vm.goods_img = ret.data.goods_img;
              vm.haggling = ret.data.haggling;
              vm.cuts = vm.yikan / vm.youhui * 100;
              vm.changeTime();
            }else{
              toast(ret.msg);
            }
        });
      },
    },
})

以上是所有代码,有什么问题可以随时下方留言,如果对你有帮助,记得关注哦!!!谢谢大家支持