vue实现商品评分效果（通过插件实现）

小刘的博客间2024-03-06 16:38

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

废话不多说，直接上代码

方法一：

javascript 复制代码

<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>

方法二：

javascript 复制代码

<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>