溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下Vue如何實現星級評價效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
具體內容如下
1、本文五角星采用的阿里巴巴矢量圖標庫；
2、數據內容可根據實際需求進行改動；
3、主要實現了鼠標滑動改變樣式，鼠標離開樣式消失，鼠標點擊對應的五角星樣式被改變及完成評價；
4、本文章只是簡單的實現了功能，僅做參考！
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五星評價（Vue組件）</title> <!-- 引入阿里矢量圖標 --> <link rel="stylesheet" href="./iconfont.css" > <!-- 引入vue --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> .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; } </style> </head> <body> <!-- 星級評價板塊 --> <div class="box"> <star></star> </div> </body> <script> // 創建局部組件 var star = { // 子模版 template:`<div> <span class="iconfont icon-wjxb" v-for="n in 5" @mouseenter="change(n)" @mouseleave="unchange" :class="{'active':activeIndex>=n}" @click="fix(n)"></span> </div>`, 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 } }) </script> </html>
以上是“Vue如何實現星級評價效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
