Vue動態(tài)實現(xiàn)評分效果

更新時間：2017年05月24日 12:14:10 作者：薛偉杰

這篇文章主要為大家詳細介紹了Vue動態(tài)實現(xiàn)評分效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue動態(tài)實現(xiàn)評分效果的具體代碼，供大家參考，具體內(nèi)容如下

1.圖片分為三種

on:half: off

<style>
  .star{
    font-size: 0;
  }
  .star-item{
    display: inline-block;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    margin-right: 22px;
    background-size: 100%;
  }
  .star-item.on{
    background-image: url(img/on.png);
  }
  .star-item.half{
    background-image: url(img/half.png);
  }
  .star-item.off{
    background-image: url(img/off.png);
  }
</style>

<div id="app">
  <ul class="star">
    <span v-for="(itemClass,index) in itemClasses" :class="itemClass" class="star-item" track-by="index"></span><!--性能優(yōu)化 track-by 數(shù)據(jù)不改變時不會重新渲染-->
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
  　data:{
    score: 4
  },
   computed:{ //計算屬性
    itemClasses(){
      let result = [];
      let score = Math.floor(this.score * 2 ) / 2;
      let hasDecimal = score % 1 !== 0;
      let integer = Math.floor(score);
      for(let i=0;i<integer;i++){
        result.push("on");
      }
      if(hasDecimal){
        result.push("half");
      }
      while(result.length < 5){
        result.push("off");
      }
      return result;
    }
  }
})
</script>

根據(jù)需求改變代碼

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue
評分

相關(guān)文章

復(fù)刻畫龍產(chǎn)品vue實現(xiàn)新春氣泡兔
這篇文章主要為大家介紹了復(fù)刻畫龍產(chǎn)品之使用vue實現(xiàn)新春氣泡兔示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-01-01
element使用自定義icon圖標的詳細步驟
前端經(jīng)常會用到UI提供的各種圖表,推薦阿里的圖標庫,下面這篇文章主要給大家介紹了關(guān)于element使用自定義icon圖標的詳細步驟,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-11-11
vue3+echarts實現(xiàn)好看的圓角環(huán)形圖
這篇文章主要介紹了vue3+echarts實現(xiàn)好看的圓角環(huán)形圖效果,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
深入理解Vue transition源碼分析
本篇文章主要介紹了深入理解Vue transition源碼分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
vue-quill-editor富文本編輯器簡單使用方法
這篇文章主要為大家詳細介紹了vue-quill-editor富文本編輯器簡單使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-09-09
Vue快速實現(xiàn)通用表單驗證功能
這篇文章主要介紹了Vue快速實現(xiàn)通用表單驗證功能，本文通過一個小例子給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-12-12
vue中axios請求的封裝實例代碼
這篇文章主要給大家介紹了關(guān)于vue中axios請求封裝的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧要的朋友可以參考下
2019-03-03
詳解Vue源碼學(xué)習(xí)之callHook鉤子函數(shù)
這篇文章主要介紹了詳解Vue源碼學(xué)習(xí)之callHook鉤子函數(shù)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
使用Vuex實現(xiàn)一個筆記應(yīng)用的方法
這篇文章主要介紹了使用Vuex實現(xiàn)一個筆記應(yīng)用的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
axios請求中以params或body形式傳遞參數(shù)的區(qū)別淺析
最近在做自己項目中,做一個非常簡單的新增用戶場景,但是使用原生axios發(fā)送post請求的時候,還是踩了不少坑的,下面這篇文章主要給大家介紹了關(guān)于axios請求中以params或body形式傳遞參數(shù)的區(qū)別的相關(guān)資料,需要的朋友可以參考下
2023-04-04