超简洁原生js结合Vue的星星评分源码,每个方格就代表一个星星,变色代表评分,还贴心的将一些变量打印出来进行参考。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> * { margin: 0; padding: 0; } #app { width: 1000px; height: 200px; overflow: hidden; } li { width: 200px; height: 200px; border: 1px solid red; box-sizing: border-box; float: left; } .select { background: pink; } li { list-style: none; } </style> <body> <!-- style=" margin-left: 500px;" --> <ul id="app"> <li v-for="(item,index) in list" @mouseover="move(index)" @mouseout="out()" @click="handleClick(index)" :class="flag>=index?'select':''"> <p>key:{{index}}</p> <p>flag:{{flag}}</p> <p>cur:{{cur}}</p> <p>{{flag>=index}}</p> </li> </ul> </body> </html> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> var app = new Vue({ el: '#app', data: { flag: -1, cur: -1, list: [{ number: 0 }, { number: 1 }, { number: 2 }, { number: 3 }, { number: 4 }] }, methods: { handleClick(i) { this.cur = i }, move(i) { console.log(i) this.flag = i }, out() { this.flag = -1 if (this.cur == -1) { console.log("用户没有点击") } else { this.flag = this.cur } // if (this.cur !== -1) { // this.flag = this.cur // } else { // this.flag = -1 // } } }, }) </script> |
7