超简洁原生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> |
「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」
共 0 条评论关于"超简洁原生js结合Vue的星星评分源码"
最新评论