vue评分使用v-model实现

是的，vue评分可以使用v-model实现数据与事件的双向绑定。在RatingControl.vue组件中定义属性'modelValue'，并发出名称为'update:modelValue'的事件，根组件App.vue同样可以使用v-model来绑定数据和事件。具体实现方法可以参考引用和中的示例代码。

相关问题

vue评分显示在评价里

如果您想在评价中显示Vue评分，您可以将Vue评分组件集成到评价表单中，并将用户提交的评分值存储在数据库中。然后，当您在评价列表中显示评价时，您可以将Vue评分组件与评价的评分值进行绑定，以便在评价中显示评分。以下是一个简单的示例：

1. 创建一个Vue评分组件：

<template>
  <div>
    <star-rating v-model="rating" :increment="0.5" :star-size="30"></star-rating>
  </div>
</template>

<script>
import StarRating from 'vue-star-rating'

export default {
  components: {
    StarRating
  },
  data() {
    return {
      rating: 0
    }
  }
}
</script>

2. 将Vue评分组件集成到评价表单中，并在提交评价时将评分值存储到数据库中：

<template>
  <div>
    <h2>Leave a Review</h2>
    <form @submit.prevent="submitReview">
      <div>
        <label for="rating">Rating:</label>
        <vue-rating v-model="review.rating"></vue-rating>
      </div>
      <div>
        <label for="comment">Comment:</label>
        <textarea v-model="review.comment"></textarea>
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
import VueRating from './VueRating.vue'

export default {
  components: {
    VueRating
  },
  data() {
    return {
      review: {
        rating: 0,
        comment: ''
      }
    }
  },
  methods: {
    submitReview() {
      // Save review to database
      // ...
      // Reset form
      this.review = {
        rating: 0,
        comment: ''
      }
    }
  }
}
</script>

3. 在评价列表中将Vue评分组件与评价的评分值进行绑定：

<template>
  <div>
    <h2>Reviews</h2>
    <ul>
      <li v-for="review in reviews">
        <div>
          <h3>Rating: <vue-rating :value="review.rating"></vue-rating></h3>
          <p>Comment: {{ review.comment }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import VueRating from './VueRating.vue'

export default {
  components: {
    VueRating
  },
  props: {
    reviews: {
      type: Array,
      required: true
    }
  }
}
</script>

这样，当您在评价列表中显示评价时，您将看到Vue评分组件与评价的评分值一起显示。

vue实现一个星级打分效果_vue 星星评分组件

下面是一个简单的 Vue 星级评分组件的实现：

<template>
  <div class="rating">
    <span v-for="(star, index) in stars"
          :class="['star', star]"
          :key="index"
          @click="select(index)">
    </span>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      stars: []
    }
  },
  mounted() {
    this.updateStars()
  },
  methods: {
    updateStars() {
      this.stars = []
      for (let i = 0; i < this.max; i++) {
        this.stars.push(i < this.value)
      }
    },
    select(index) {
      this.value = index + 1
      this.$emit('input', this.value)
      this.updateStars()
    }
  }
}
</script>

<style>
.star {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(star.png) no-repeat;
  background-size: contain;
  cursor: pointer;
}
.star:hover,
.star.active {
  background-position: 0 -24px;
}
</style>

使用方式：

<template>
  <div>
    <h3>我的评分：{{ rating }}</h3>
    <star-rating v-model="rating"></star-rating>
  </div>
</template>

<script>
import StarRating from './StarRating.vue'

export default {
  components: {
    StarRating
  },
  data() {
    return {
      rating: 3
    }
  }
}
</script>

其中，star.png 是一张包含两个星星的图片，第一个星星是默认状态，第二个星星是激活状态。

这个组件的实现很简单，通过 props 接收评分值和最大值，然后用一个数组来表示星星的激活状态，点击某个星星时更新评分值和星星状态，通过事件向父组件传递更新后的评分值。最后，用 CSS 来实现星星的样式。