vue星星评分

最新推荐文章于 2024-06-30 15:30:22 发布

欧阳小坏

最新推荐文章于 2024-06-30 15:30:22 发布

阅读量213

点赞数

分类专栏：学习记录文章标签：前端 vue 评分

本文链接：https://blog.csdn.net/ou24689/article/details/102500650

版权

学习记录专栏收录该内容

10 篇文章 0 订阅

订阅专栏

星星评价挺简单的直接上代码
在这里插入图片描述

	<div class="evalTitle">评价</div >
			<div class="evalStar">
				<div  class="starItem" v-for="index in 5" :key="index" @click="changeGrade(index)">
				vs没有报错，不知道这么写对不对
					<img v-if="grade>=index" class="starImg" src="/static/starActive.png" >
						<img v-else  class="starImg" src="/static/star.png"  >
				</div >
			</div >

.evalTitle{
		width: 100%;
		text-align: center;
		padding-top: 20px;
	}
	/* 评价星星 */
.evalStar{
		width: 100%;
		display: flex;
		flex-wrap: nowrap;
		padding-left: calc(50% - 100px);
		}
.starImg{
		width: 40px;
		height: 40px;
	}

export default {
		data() {
			return {
				grade:0
			}
		},
		methods: {
			changeGrade(num){
				let that = this
				console.log(num) //这个num的值就是分数
			    that.$data.grade=num
			}
			
		}
	}