记录一次使用element-ui 进度条的示例程序

在线调试地址

HTML

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");



	

		
	
	

		
	

js

var app = new Vue({
	el: '#app',
  data: {
  	used: 50,
    color: 'red'
  },
  methods: {
  	
  },
  watch: {
  	used: function(v, v2){
    	if(v >= 80){
      	this.color = "red";
      } else if (v >= 60){
      	this.color = "orange";
      } else {
      	this.color = "blue";
      }
    }
  }
});

在列表中使用：

html

js

Vue.filter('color', function (input) {
    if (input == null){
        return "#f56c6c";
    }
    if (typeof input != "number"){
        return "#f56c6c";
    }
    if (input >= 90){
        return "#f56c6c";
    } else if (input >= 80){
        return "orange";
    } else {
        return "#409EFF";
    }
});