网站建设设计书建设网站销售

Vue.js 实现了一个简单的商品评分功能。用户可以通过点击星星来修改商品的评分，并且评分显示了相应的星星数。

废话不多说，直接上代码

方法一：

<template><div><avue-form :model="formData"><avue-form-item label="商品评分" prop="status_id"><avue-rate v-model="formData.status_id" :show-text="true" :text-color="'#ff9900'"></avue-rate></avue-form-item></avue-form></div>
</template><script>
export default {data() {return {formData: {status_id: 0, // 初始评分为0},};},
};
</script>

方法二：

<template><div><div><label>商品评分:</label><span>{{status_id}}</span><ul class="rating"><li v-for="n in 5" :key="n" :class="{ 'filled': n <= status_id }" @click="updateRating(n)">&#9733;</li></ul></div></div>
</template><script>
export default {data() {return {status_id: 0, // 初始评分为0};},methods: {updateRating(rating) {this.status_id = rating;},},
};
</script><style>
.rating {list-style-type: none;padding: 0;
}.rating li {display: inline;padding: 5px;font-size: 24px;cursor: pointer;
}.rating li.filled {color: orange;
}
</style>