vue实现评价星星功能
更新时间：2020年06月30日 09:49:05 作者：qq_42221334
这篇文章主要为大家详细介绍了vue实现评价星星功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现评价星星的具体代码，供大家参考，具体内容如下
代码：
<template>
<ul class="StarsWrap">
<li v-for="(i,index) in list" :key="index" @click="clickStars(index)">
<img :src="xing>index?stara:starb"/>
</li>
</ul>
<p>{{rateScoreText}}</p>
</template>
<script>
export default {
name: 'evaluate',
data () {
return {
rateScoreText: '',
rateScoreDesc: ['非常不满意，各方面都很差', '不满意，比较差', '一般，还需改善', '比较满意，仍可改善', '非常满意,无可挑剔'],
stara:'../../static/img/details/shoucang.png',//亮星星
list:[0,1,2,3,4],
starb:'../../static/img/details/shouc.png',//暗星星
xing:0,
}
},
methods:{
clickStars(i){
this.rateScoreText=this.rateScoreDesc[i]
this.xing = i+1
console.log("点击了"+(i+1)+"颗星")
}
},
}
</script>
<style scoped>
.StarsWrap{
width: 100%;
height: 0.2rem;
margin: 0.1rem 0;
}
.StarsWrap li{
float: left;
margin-right: 0.1rem;
}
</style>
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
Vue3 Element Plus表单自定义校验的实现全过程
这篇文章主要介绍了Vue3 Element Plus表单自定义校验的实现全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
这篇文章主要为大家详细介绍了vue输入框组件开发过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
Netlify 带有内置表单处理功能，可以用来存储表单数据，下载 csv 文件，同时可以在接收到新的提交时发送邮件通知或者通过配置 webhook 发送请求。这篇文章主要介绍了在 Vue 应用中使用 Netlify 表单功能,需要的朋友可以参考下2019-06-06
如何优雅的在一台vps（云主机）上面部署vue+mongodb+express项目
这篇文章主要介绍了如何优雅的在一台vps（云主机）上面部署vue+mongodb+express项目，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
在许多Web应用程序中,数据筛选和搜索是关键的用户体验功能,本文将深入探讨在Vue中如何进行数据筛选与搜索的实现,感兴趣的小伙伴可以跟随小编一起学习一下2023-10-10
这篇文章主要介绍了Vue中computed和watch的使用与区别，文中通过示例为大家进行了详细讲解，对Vue感兴趣的同学，可以学习一下2022-04-04
这篇文章主要介绍了详解vue+webpack+express中间件接口使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了Vue中Number方法将字符串转换为数字,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
这篇文章主要为大家学习介绍了Vue如何利用FormData和axios实现图片上传功能，本文为大家整理了详细步骤，感兴趣的小伙伴可以了解一下2023-08-08
这篇文章主要介绍了Vue中用props给data赋初始值遇到的问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
最新评论