vue实现评价星星功能

 更新时间:2020年06月30日 09:49:05   作者:qq_42221334  
这篇文章主要为大家详细介绍了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组件学习教程进行学习。

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

相关文章

  • vite打包静态文件打开显示空白的解决

    vite打包静态文件打开显示空白的解决

    本文主要介绍了vite打包静态文件打开显示空白的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • vue实现图片按比例缩放问题操作

    vue实现图片按比例缩放问题操作

    这篇文章主要介绍了vue实现图片按比例缩放问题操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue 简单配置公用接口地址方式

    Vue 简单配置公用接口地址方式

    这篇文章主要介绍了Vue 简单配置公用接口地址方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • vue中echarts视图不更新问题及解决

    vue中echarts视图不更新问题及解决

    这篇文章主要介绍了vue中echarts视图不更新问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • Vue Camera组件功能及常用使用方法

    Vue Camera组件功能及常用使用方法

    Vue Camera组件是一个用于在Web应用中使用摄像头的Vue插件,它提供了一些常见的功能和方法来控制摄像头和捕获图像或视频数据,本文给大家介绍Vue Camera组件的常见功能和使用方法,感兴趣的朋友一起看看吧
    2023-11-11
  • vue实现token过期自动跳转到登录页面

    vue实现token过期自动跳转到登录页面

    本文主要介绍了vue实现token过期自动跳转到登录页面,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 基于Vue实现手势签名

    基于Vue实现手势签名

    这篇文章主要为大家详细介绍了基于Vue实现手势签名,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • Vue中UI组件库之Vuex与虚拟服务器初识

    Vue中UI组件库之Vuex与虚拟服务器初识

    这篇文章主要介绍了Vue中UI组件库之Vuex与虚拟服务器初识,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-05-05
  • 基于vue.js中事件修饰符.self的用法(详解)

    基于vue.js中事件修饰符.self的用法(详解)

    下面小编就为大家分享一篇基于vue.js中事件修饰符.self的用法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Vue2和Vue3在v-for遍历时ref获取dom节点的区别及说明

    Vue2和Vue3在v-for遍历时ref获取dom节点的区别及说明

    这篇文章主要介绍了Vue2和Vue3在v-for遍历时ref获取dom节点的区别及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03

最新评论