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 相关文章推荐
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
Jul 10 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
Vue.JS项目中5个经典Vuex插件
Nov 28 Javascript
javascript实现QQ空间相册展示源码
Dec 12 Javascript
vue 组件中slot插口的具体用法
Apr 03 Javascript
vue 注册组件的使用详解
May 05 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
node.js的Express服务器基本使用教程
Jan 09 Javascript
Vue实现导航栏的显示开关控制
Nov 01 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 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
php 时间计算问题小结
2009/01/04 PHP
分享一个超好用的php header下载函数
2014/01/31 PHP
PHP不使用递归的无限级分类简单实例
2016/11/05 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
javascript 学习笔记(onchange等)
2010/11/14 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
Python: glob匹配文件的操作
2020/12/11 Python
24个canvas基础知识小结
2014/12/17 HTML / CSS
Clarins娇韵诗美国官网:法国天然护肤品牌
2016/09/26 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
简历上的自我评价
2014/02/03 职场文书
高三高考决心书
2014/03/11 职场文书
听课评语大全
2014/04/30 职场文书
七夕情人节促销方案
2014/06/07 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
优秀团支部申报材料
2014/12/26 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python
JS代码编译器Monaco使用方法
2021/06/11 Javascript
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL