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 相关文章推荐
JavaScript 不只是脚本
May 30 Javascript
Javascript 面向对象之重载
May 04 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
Apr 17 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 Javascript
js自定义QQ菜单效果
Jan 10 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
详解vue的diff算法原理
May 20 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
May 22 Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 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
上海无线电三厂简史修改版
2021/03/01 无线电
php中的时间显示
2007/01/18 PHP
PHP 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
2017/11/09 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
Python 将pdf转成图片的方法
2018/04/23 Python
Python实现基于POS算法的区块链
2018/08/07 Python
python使用webdriver爬取微信公众号
2018/08/31 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
python的常见矩阵运算(小结)
2019/08/07 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
国际贸易专业推荐信
2013/11/15 职场文书
自荐书范文
2013/12/08 职场文书
大学生个人求职信
2014/06/02 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
个人工作年终总结
2015/03/09 职场文书
2015年外联部工作总结
2015/04/03 职场文书
冬季作息时间调整通知
2015/04/24 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
高三数学教学反思
2016/02/18 职场文书