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 相关文章推荐
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 Javascript
firefox插件Firebug的使用教程
Jan 02 Javascript
基于jquery的inputlimiter 实现字数限制功能
May 30 Javascript
Javascript this 的一些学习总结
Aug 02 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
angular2 ng build部署后base文件路径问题详细解答
Jul 15 Javascript
React根据宽度自适应高度的示例代码
Oct 11 Javascript
Node.js+ELK日志规范的实现
May 23 Javascript
js canvas实现星空连线背景特效
Nov 01 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 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+MYSQL 出现乱码的解决方法
2008/08/08 PHP
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
python 判断网络连通的实现方法
2018/04/22 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
django之使用celery-把耗时程序放到celery里面执行的方法
2019/07/12 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
django xadmin 管理器常用显示设置方式
2020/03/11 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
日本最新流行服饰网购:Nissen
2016/07/24 全球购物
费用会计岗位职责
2014/01/01 职场文书
销售总经理岗位职责
2014/03/15 职场文书
诚信贷款承诺书
2014/05/30 职场文书
优秀班主任申报材料
2014/12/16 职场文书
手残删除python之后的补救方法
2021/06/26 Python