Vue 2.0 Hello World

HTML

<script src="https://unpkg.com/vue"></script>
<style>
#app{position:relative}
#bars>div, #sbars>div{height:3px;margin-bottom:2px;background:#faa}
#sbars{position:absolute;top:0}
#sbars>div{background:rgba(200,200,255, 0.5)}
</style>
<div id="app">
  <div id="bars">
    <div v-for="bar in bars" :style="{width:bar+'px'}">
    </div>
  </div>
  <div id="sbars">
    <div v-for="bar in sbars" :style="{width:bar+'px'}">
    </div>
  </div>
  <p>
  <b>{{time}}</b><br/>
  Largest: {{lgIndex}} {{lgValue}}({{bars[lgIndex]}}) @ {{lgTime}}<br/>
  Least: {{ltIndex}} {{ltValue}}({{bars[ltIndex]}}) @ {{ltTime}}<br/>
  {{fbs}}
  </p>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
  	time: 0,
    bars: (new Array(100)).fill(100),
    lgIndex: 0,
    lgValue: 100,
    lgTime: 0,
    ltIndex: 0,
    ltValue: 100,
    ltTime: 0,
    fbs: []
  },
  computed: {
  	sbars: function() {
    	return this.bars.slice().sort((a,b)=>(a-b));
    }
  },
  mounted: function() {
  	setInterval(()=>{
    	this.time++;
    	for (let i = 0; i < 100; i++) {
      	if (this.bars[i] <= 0) {
        	continue;
        }
      	this.$set(this.bars, i, this.bars[i]-1);
        if (this.bars[i] < this.ltValue) {
        	this.ltIndex = i;
          this.ltValue = this.bars[i];
          this.ltTime = this.time;
        }
        let r = Math.floor(100*Math.random());
        this.$set(this.bars, r, this.bars[r]+1);
        if (this.bars[r] > this.lgValue) {
        	this.lgIndex = r;
          this.lgValue = this.bars[r];
          this.lgTime = this.time;
          if (this.lgValue > 200 && this.lgIndex != this.fbs[this.fbs.length -1]) {
          	this.fbs.push(this.lgIndex);
          }
        }
      }
    }, 10);
  }
})