vue滑動條實現圓顏色的改變
用input做一個滑動條，vue的監聽事件來控制顏色的變化，可是不知道怎麼利用迴圈，可以直接通過newVal數值的變化來直接操作color陣列....
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="js/vue.js"></script> <style type="text/css"> .circle{ display: block; border-radius: 50%; height: 250px; width: 250px; margin: 0; } </style> </head> <body> <div id="app"> <input type="range" name="" style="width: 500px;" v-model="step" max="1000" @onchange="add()">{{step}} <figure class="circle" v-bind:style="{background:morecolor}" ></figure> </div> <script type="text/javascript"> var circleArray=["#E3ffff","#CCFFFF","#99ccccc","#66A1D2","#3F8FD2","#0b5fa5","#043C68","#012744","#A51518","#FE3f44","#FE6F73","#FE9598",] var app=new Vue({ el:"#app", data:{ step:5, morecolor:circleArray[1] }, methods:{ add:function(){ this.step++ } }, watch:{ step:function(newVal,oldVal){ // var i=0; // if(oldVal!=newVal) // { // this.morecolor=circleArray[i++]; // } if(newVal>=0 && newVal<=80){ this.morecolor=circleArray[0] } else if(newVal>=80 && newVal<=160){ this.morecolor=circleArray[1] } else if(newVal>=160 && newVal<=220){ this.morecolor=circleArray[2] } else if(newVal>=220 && newVal<=280){ this.morecolor=circleArray[3] } else if(newVal>=280 && newVal<=340){ this.morecolor=circleArray[4] } else if(newVal>=340 && newVal<=400){ this.morecolor=circleArray[5] } else if(newVal>=400 && newVal<=460){ this.morecolor=circleArray[6] } else if(newVal>=460 && newVal<=520){ this.morecolor=circleArray[7] } else if(newVal>=520 && newVal<=600){ this.morecolor=circleArray[8] } else if(newVal>=600 && newVal<=680){ this.morecolor=circleArray[9] } else if(newVal>=680 && newVal<=800){ this.morecolor=circleArray[10] } else if(newVal>=800 && newVal<=1000){ this.morecolor=circleArray[11] }
}
} }) </script> </body> </html>