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 new后的constructor属性
Aug 05 Javascript
js中有关IE版本检测
Jan 04 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 Javascript
初识angular框架后的所思所想
Feb 19 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
layui实现显示数据表格、搜索和修改功能示例
Jun 03 Javascript
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
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
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
Terran魔法科技
2020/03/14 星际争霸
收集的DedeCMS一些使用经验
2007/03/17 PHP
php intval的测试代码发现问题
2008/07/27 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
JQuery仿小米手机抢购页面倒计时效果
2014/12/16 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
python实现手机通讯录搜索功能
2018/02/22 Python
Python实现八皇后问题示例代码
2018/12/09 Python
基于树莓派的语音对话机器人
2019/06/17 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
物流管理应届生求职信
2013/11/07 职场文书
护理专业自荐信范文
2014/02/26 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python
CSS极坐标的实例代码
2021/06/03 HTML / CSS
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
Ajax实现三级联动效果
2021/10/05 Javascript
Golang 切片(Slice)实现增删改查
2022/04/22 Golang