Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to realize the effect of Star Evaluation by Vue

2025-04-05 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/01 Report--

小编给大家分享一下Vue如何实现星级评价效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

具体内容如下

1、本文五角星采用的阿里巴巴矢量图标库;

2、数据内容可根据实际需求进行改动;

3、主要实现了鼠标滑动改变样式,鼠标离开样式消失,鼠标点击对应的五角星样式被改变及完成评价;

4、本文章只是简单的实现了功能,仅做参考!

五星评价(Vue组件) .box{ width:400px; height: 100px; border: 1px solid black; margin:0 auto; } .box .icon-wjxb{ font-size:44px; line-height: 100px; color:grey; padding: 0 10px; } .box .active{ color:yellow; } // 创建局部组件 var star = { // 子模版 template:` `, data(){ return { activeIndex:-1, // 用来判断什么时候改变样式 flag:false // 用来验证用户是否点击过 } }, methods:{ // 鼠标进入触发,接收参数 change(n){ // 判断用户是否点击过 if(!this.flag){ // 没有点击过,改变样式 this.activeIndex = n; } }, // 鼠标离开时触发 unchange(){ // 判断用户是否点击过 if(!this.flag){ // 没点击过,鼠标离开后样式消失 this.activeIndex = -1; } }, // 点击时触发,接收参数 fix(n){ // 赋值 this.activeIndex = n; // 改变状态 this.flag = true; } } } new Vue({ // 挂载元素 el:".box", // 注册组件 components:{ star:star } }) 以上是"Vue如何实现星级评价效果"这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report