vue实现评价星星功能


Posted in Javascript onJune 30, 2020

本文实例为大家分享了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组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
js修改原型的属性使用介绍
Jan 26 Javascript
浅谈javascript 归并方法
Jan 21 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
WebPack基础知识详解
Jan 16 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
quickjs 封装 JavaScript 沙箱详情
Nov 02 Javascript
Json实现传值到后台代码实例
Jun 30 #Javascript
vue实现循环滚动列表
Jun 30 #Javascript
js实现简单音乐播放器
Jun 30 #Javascript
angular中的post请求处理示例详解
Jun 30 #Javascript
vue开发简单上传图片功能
Jun 30 #Javascript
jquery实现上传图片功能
Jun 29 #jQuery
vue实现图片上传到后台
Jun 29 #Javascript
You might like
php比较两个绝对时间的大小
2014/01/31 PHP
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
jquery等待效果示例
2014/05/01 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
javascript中神奇的 Date对象小结
2017/10/12 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
Python多进程原理与用法分析
2018/08/21 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
行政经理的岗位职责
2013/11/23 职场文书
2013年员工自我评价范文
2013/12/27 职场文书
购房协议书范本
2014/04/11 职场文书
车辆年检委托书范本
2014/10/14 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
银行竞聘报告范文
2014/11/06 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
国庆节主题班会
2015/08/15 职场文书
2016十一国庆节感言
2015/12/09 职场文书
python中tkinter复选框使用操作
2021/11/11 Python
Win11软件图标固定到任务栏
2022/04/19 数码科技
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python