正常vue做法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet">
<style>
.star{
color: gold;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<i v-for="order in count"
@click="score=order"
@mouseleave="score1=score"
@mouseenter="score1=order"
:class="order<=score1?'fa-star':'fa-star-o'"
class="fa star"
aria-hidden="true">
</i>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.config.devtools = false
Vue.config.productionTip = false
new Vue({
el: "#app",
data() {
return {
score:2,
score1:2,
count:10
}
},
methods:{
}
})
</script>
</body>
</html>
vue用组件来写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet">
<style>
.star {
color: gold;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<h1>{{score}}</h1>
<star label="客服态度" :score="score" @change="score = $event"></star>
<!-- <star label="物流速度"></star>
<star label="商品质量" :count="count"></star> -->
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
Vue.component('star', {
props: {
count: {
type: Number,
default: 5
},
score: {
type: Number,
default: 0
},
label: {
type: String,
required: true
}
},
template: `
<div>
{{label}}--{{innerScore}}
<i v-for="order in count" @click="innerScore=order" @mouseleave="score1 = innerScore"
@mouseenter="score1=order"
:class="order<=score1?'fa-star':'fa-star-o'" class="fa star" aria-hidden="true">
</i>
</div>
`,
watch: {
innerScore(val) {
this.$emit('change', val)
}
},
data() {
return {
innerScore: this.score,
score1: this.score
}
},
})
let app = new Vue({
el: "#app",
data() {
return {
score1: 2,
score: 2,
count: 10
}
},
mounted() {
},
})
</script>
</body>
</html>