vue星星评分含半星


模拟数据 data中定义 datalist :[{   text: '1. 是否是日程表中老师授课?',      type == 1,   value: '' }] 核心代码:   itemCurIndex(score, indexs) 第一个参数为分数,第二个参数为第几道题   getScoreType(ind, score)第一个参数为当前列表第几个星星,第二个参数为当前列表的分数   作用是给循环的星星添加相应的class                
                                          
          
  js部分   itemCurIndex(score, indexs) {         this.datalist[indexs].value = score    },   getScoreType(ind, score) {        if (score) {           var startFullIndex = score / 2           if (ind + 1 <= startFullIndex) {             return 'full'           } else if (ind + 1 > startFullIndex && ind + 1 < startFullIndex + 1) {             return 'half'           } else {             return 'null'           }         } else {           return 'null'         }       },  css部分   有样式问题自己调整哈 .item-star {         display: flex;         margin-top: 17px;         .star {           width: 20px;           height: 20px;           padding-left: 5px;           padding-right: 5px;           position: relative;           a {             width: 15px;             height: 15px;             position: absolute;             top: 0;             left: 0;           }           a:nth-of-type(even) {             width: 15px;             height: 15px;             color: rgba(255, 255, 255, 0);             position: absolute;             top: 0;             left: 15px;           }         }         .null {           background: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAoCAYAAACIC2hQAAAAAXNSR0IArs4c6QAABCBJREFUWEfVmF1oHFUUx89/ZpNsIyLVh0rN9947W61tBcGASkEpfqIvolXoi+CDttQXIVhFBKHQvOiDtX3qiz7Ujz6JFJVGkFKQgBBqUXfu3d1GanwQW/yqMbt7/zKpG5J0szM7u2vNPC075/zPb86cc++5A1knF9YJp3QMlKQXWnsQIk9GD0+RjwKlXgXgOpGMjoEWTPGw0O1bDuUBh7VW+/83oKVSaXu15mZIrnhwAMz43h1jY2Nn24XtSEZDY06Q8kQjGEBOBFovlkM7V9ug1trbHeXs6mzWoaKsepDtSqlz1xS0YOwHQj7VFAL4MK/V7msGaszsbZTKN1HHN4OIOh/Ss03r4W/Twrb16sPQHqfw6STBIXg/CNQzSWwb1npax/D8+VulUj0Xl81ltep6Mv7W0dHR79PETJVRkhlji5+QfLCloMCngco9BqDakp9I850p6uTwwoXN3vy8JhCIE02IFpFxIW9uNdgVe/wkkGlQjHhiQIYumzXBwMBctEKspbkio7Ozsxv/rlSeE/IuEgEgimR/OqDWvABcJsUCDAWY3tDXd2xwcPDiUunUf5TL5S0Lleq0iFzfWoiuWf/hoXe8vlIsZTQMzZcU2dm1sGmEgTN5re5dLJi6f2jsZZIb0uh1ywfAX4FWi6W3BFow9gsh7+tW0HS6mMoHatcK0GKxuK3mOE0ym060s14A5jO+N16fvFZ0vbX2/prjxyJyXWfDtqYWrQC+h8dzudzUVV1f/8Nae7ejnCR5Q2vyHbP+XTL+o/mxsdPLFRvuTNbaO2uOn4nITR0Ln0AIwK8Q/yGtR79abb7mFvrvnHmK5KYEMTphctH38IBS6utGYk33+mKxGNScmyJloBMka2kA8nPG93c1O7LEDiXlcnlkoVI9IyKbuwILXEJP5p5gZOS7ZvqxoJFzGNoJCie7AyqH8lofiNNOBFow5hWhHIwTS3Uf3pt5nXspzjcRaCuTfFzAq7oZ8nmgdexcmwzU2GiS39oqREL7uXygb4mzjQUl2Rsa+6eIZOLE0t7P9vXeODw8fKmtZiqUSjukWptJC5HIL+PvXL0TJV7w64bGlPY41t5LFDClkQdvr9a5o21lNLR2ko4TKRkSuQFyNNB6b1ugBWNPCvlwkoiA/AbBu04ACPckHWwgOB0EqunpIraZQmNDktHJc80rmsSF8k5/f/bQwMDAL5FhdFCcX1iYEEr02bHp2AiRH4NAN92m40FDM0ORHWtQViE4ls32vjE0NDTXyKZUKm2qOndAyOdJ6Wusg0I+UFvaevXGFF9wdEeWi1w5f/O4B7yulLJJysJaO0jKa458dvVSBw8vBkq93RZo5GyM2eeI/YBsFOGpjO9Ppv04a8wPOScLLwv5SDTJQ3BE69xbcQ8b++rjBP6r++sG9B+In4048f4OLwAAAABJRU5ErkJggg==)    no-repeat center center;           background-size: contain;         }         .full {           background: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAoCAYAAACIC2hQAAAAAXNSR0IArs4c6QAABCxJREFUWEfVmFtoHFUcxr9vdmZaKyJV2E0TI4Im1Ma2omBApVgpXtEX8QZ9EXywqakmswSriEUoNLDTrbUmT33Rh2rtk4ioNF4oBQkooYaqSZ96SbJbbPGW1p3Z+WQTUrO57MzObqyZp2XP9/9/v/M/Z85liGXycJlwom6g0i7Dz/bvVqCnS52nwY/Nrm1vkLuCehSjbqC+mzwQCNtnQxnkAdPJdf5vQLUvucEvYkgqHyESMhO4k6/mT9QKW5eKem7yiISnFoIhcMRK56emQy1PzaB6J3WH7+vE3GrOQE1V1eQGvpIbvqqghUzqI0DPVIbgYTude/aqgWp/wzq/EPwowKgEQSAwbWM9d0ycjAtb09AXMqlDgJ6LZs4P7XTu+Wja+arYoMquud0vFofDqnllrpaqCrON6bGf48DGAtXXD5j+Dyc/lfBwNaYkPjfvWvcEN3/jVxM3tYFUCpBEZJsbffotKqqVVAvAFkjtAhqqNZsyJMYBDgIalTjKBEdMmaPoOjNGUovlLANV382r/cuFFxEE9whsJXGbpFVxgKqNITkp4RShERjGoAnzILvPXpg1daZ/KtO41oc/KOC6ak2WQk/iT9My2mdWiisV9TLJbwVsWgrTuDlJHLec/P1lc9RzU5OSrombdCniSF6ynNzU1Pu3om7qK0mbl8Iwbk6SA5aT21IGqr2p9X6AQUEr4yauZxzBy6ap9pmTV9lb72VTD6KITwRdW0/TanOVVgAAT1pObmDeWz/zh+c23gv5nwm4vlqDeugJ/AEj8bjVPX5sdr4FF/xCZs3dRPCFoBvrYR41B4HfRD5iO7nv5sYsujNNnzNxVFIqqlEtOpIXJOMhOz3+/UJ5Km+hblOrL29AwE21QITFkjxvJrSl0pUl9FCibMMtfjE4LqAxzDBOO4GLZiJxH7vGf6oUHwpaCvYyDT1C0BsHJCyGBvdY3bmdobowwTRo6nVBu6Noq9WQxl7LmXDC4iJVtLqTfJhleTuJLy0nH3qujQbqpoYhtVWHEE1NYMxK55vC1KGgOtxm+6fP/yXADEsWt91atfIGdpy+WNPLJLdpoydvKC5ElDgaiU1zd6LIC/6M0HeTWwPhgyiGsTU0Omxnor+minpusldCT2yICIEG0W86+Y7aQDPJ0gHl0Qh+pYvb7wTfB0QJW6MebEgcs5x8xdtF6MtUyCRHALRU7C15CdB75gprD18+92tJO31R/LsHATrDjo0kzllOvuI2HQ7qJocgbFwIlIBP8mDCtt9m55mxhTTal0z5AXdCeEnSikU6/Iudzq+taegLbsM2KOibnaT0hU7gIYvWW+w+eyrKtJDb2Oyh+CalF+Yvddxhp3Pv1gRaCi64DduhoJPgahFHrYR6436c1f7mWz2v8Bqlx0RMguyzu3PZsM6GDn1Ygv+qfdmA/gPHiYc4lxrdSwAAAABJRU5ErkJggg==)    no-repeat center center;           background-size: contain;         }         .half {           background: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAoCAYAAACIC2hQAAAAAXNSR0IArs4c6QAABFdJREFUWEfVmF1oHFUYht9vZjdJFZEo7G7zY352zmw1thUEAypFpfiL6YW0KvRG8EJbI6IQrCKKUGhgp+tPTa56oxfV2isRUWkUKREJWEINVZMYTbURLLb414bZ2XllEqcmm92d3ZmkTfZqd+fM+z3nPd/5zjcjWCMfWSOcWDZQ8hXNyQ3upcvtP20bBoH3TcN4UUTc5TBj2UAdK3HAJXZ7UD/2DM+xaSIHlDJ6Vw0oX0tscgoYJedXyAcVEcZ07abOzs4TUWGXxdG8lThC4iEfxgf1fovgiKnU9ssOyteTNzoOT/huLnR0HlSoCTYZhjEWBTayo3Y2+R7AHQshFjo697/I4YwyHr5soHwjdYNju98Q0CqBejtfEN+oVNvJsLCRHLWzyUMAHykOvsRRz1TIu6ZpPHrJQZlbf71TKIwVu1mcoz6Y52o8pnd1dHR8FwY2lKP8/I6Yc/zkhyTuKRW0lKP/5erHppF+UEScWmErgpIU5FqbHHEUCzRFqABRILsJpMoFKws6T/srBCNCTEDDhJDjbkPDhNnSMuNViHKai0A5cF2jM2s/Dte9hRBTBAbJK2qdfWXQ0moicp7EpAjHITKyrr7+YGtr69mLqeN/YbZpgwNnhMBVtYJVs5lCaP6tSV23XykuOprPJr4gsCWE4JJbwjhaMq7IcEYZt88ljD8gbyXPk1y3mkBF5IKpjLnUWwj6Gck7VxMoIEMZ09i6CJT7kxsdFyMEG6LCLsfSi8hsTNe6/c5r0a7P55J3oYAPCF4ZBTYqqFcBdE160un00JJd/3+uNt0KOh8RuDosbETQvxDTH8h0dh5bGL9kwbez628WuJ8QvDYMbFhQEflDoN+rVMdXxXHLnkzzfSaOkkzWChsS9Kyuyd2GYXxdKl7lI9RqNh3mhwi01AJbK6gIzsR0fWulR5bApoS5VLtTcIcJNFULWxOoyDmJx24z29u/raQfCOrdnM+m+gi3f2VAsS+j1J4g7SpBky8Q3Bsk5l+vzVFtf0alnwvSrgq0XCdfTrwWUBF8aipVsq8NLE/FALaVHAPZFTTrUI4CMxlTNQdpBzrKw111zqkz/xCIBYmFBEVDfd01bW1t5yJtJlrNm/PMj1YL6Y2rZenndGP6luKTqOqC7w90rMROl3hnJUE10XYplR6M5GjeSvST6FtJUBEMmkrtigaaTXgNyn3VgIrgT4G8/UPPlyLgTpJVNTYCOWaaRsWni8DNZGcT4wBUxdmKXAD4Vqw+vk+eOv27N3Z6erpx1rb7QHivHSu2jQKcNk1V8ZgOBrUSoyA2l2kUHBE5qNfVvSq9P8+UGjM1NZV0XHcPyCdI1JeesHyfMY0NkZbetlJPgu7AouIr8F7eHYpL/GV59pfJatJicnKylcRLLvmYt88X6WnytGkYb0YC9W62rdRu0O0VSCMFR+M6++WZ30K9nJ2YOJV2YT8P8n6vkxfIgFLpXNBkA5c+SOBSXV8zoP8C9wSgOEfVAVMAAAAASUVORK5CYII=)    no-repeat center center;           background-size: contain;         }       }     效果图      
vue