computed:{
random: function() {
var min = -9999;
var max = 99999;
min = Math.ceil(min);
max = Math.floor(max);
var number = String(Math.floor(Math.random() * (max - min + 1)) + min);
var arrayNumber = number.split('').reverse();
this.number(arrayNumber);
return arrayNumber;
},
},
<div class="weight-val">
<svg height="100">
<use xlink:href="../../public/svg/Seven_Segment_clip_art.svg#svg2221" id="number-5" v-bind:style="numberSvg[4]"></use>
</svg>
<svg height="100">
<use xlink:href="../../public/svg/Seven_Segment_clip_art.svg#svg2221" id="number-4" v-bind:style="numberSvg[3]"></use>
</svg>
<svg height="100">
<use xlink:href="../../public/svg/Seven_Segment_clip_art.svg#svg2221" id="number-3" v-bind:style="numberSvg[2]"></use>
</svg>
<svg height="100">
<use xlink:href="../../public/svg/Seven_Segment_clip_art.svg#svg2221" id="number-2" v-bind:style="numberSvg[1]"></use>
</svg>
<svg height="100">
<use xlink:href="../../public/svg/Seven_Segment_clip_art.svg#svg2221" id="number-1" v-bind:style="numberSvg[0]"></use>
</svg>
</div>
number: function(array){
var temp = [];
array.forEach(function (item) {
alert(item);
temp.push(this.segment(item));
});
this.numberSvg = temp;
},
segment: function (number) {
switch (number){
case '0':
return{
'--segment-1' : 'yellow',
'--segment-2' : 'yellow',
'--segment-3' : 'yellow',
'--segment-4' : 'yellow',
'--segment-5' : 'yellow',
'--segment-6' : 'yellow',
};
case '1':
return{
'--segment-1' : 'yellow',
'--segment-2' : 'yellow'
};
case '2':
return{
'--segment-6' : 'yellow',
'--segment-1' : 'yellow',
'--segment-7' : 'yellow',
'--segment-4' : 'yellow',
'--segment-3' : 'yellow',
};
case '3':
return{
'--segment-6' : 'yellow',
'--segment-7' : 'yellow',
'--segment-1' : 'yellow',
'--segment-2' : 'yellow',
'--segment-3' : 'yellow',
};
case '4':
return{
'--segment-5' : 'yellow',
'--segment-7' : 'yellow',
'--segment-1' : 'yellow',
'--segment-2' : 'yellow',
};
case '5':
return{
'--segment-6' : 'yellow',
'--segment-7' : 'yellow',
'--segment-5' : 'yellow',
'--segment-2' : 'yellow',
'--segment-3' : 'yellow',
};
case '6':
return{
'--segment-6' : 'yellow',
'--segment-7' : 'yellow',
'--segment-5' : 'yellow',
'--segment-2' : 'yellow',
'--segment-3' : 'yellow',
'--segment-4' : 'yellow',
};
case '7':
return{
'--segment-1' : 'yellow',
'--segment-2' : 'yellow',
'--segment-6' : 'yellow',
};
case '8':
return{
'--segment-1' : 'yellow',
'--segment-2' : 'yellow',
'--segment-3' : 'yellow',
'--segment-4' : 'yellow',
'--segment-5' : 'yellow',
'--segment-6' : 'yellow',
'--segment-7' : 'yellow',
};
case '9':
return{
'--segment-1' : 'yellow',
'--segment-2' : 'yellow',
'--segment-3' : 'yellow',
'--segment-5' : 'yellow',
'--segment-6' : 'yellow',
'--segment-7' : 'yellow',
};
case '-':
return{
'--segment-7' : 'yellow',
};
}
}
},