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>