[별점 표시하기] vue.js에서 별점 표시하기

완성화면 :

star.vue

0.00MB

배운 것 : 

1. style에서 데이터바인드를 이용하려면 :를 앞에 붙여야 한다.

2. 별점을 체크할 때는 빈 별과 채워진 별을 만들어 겹치는 부분을 hidden 처리하는 것이다.

3. 상위 div에서 위치를 relative로 설정하고 하위 div의 위치를 absolute로 설정하면 위 span과 위치가 같아진다.

4. 기본적으로 &star, &hearts 등 유니코드를 지원해준다.

 

 

코드 :

<div class ="star-rating">

        <span v-for="i in 5">&star;</span>

      <div class ="star-rating_check"  :style="{ width:s + '%' }">

          <span v-for="i in 5">&starf;</span>

      </div>

    </div>

 

<style scoped>

.star-rating{

 

  position: relative;

  color:gold;

  display: inline-block;

}

.star-rating_check{

  position: absolute;

  top:0;

  color:gold;

  overflow: hidden;

  white-space: nowrap;

}

</style>

 

참고 : 

https://www.youtube.com/watch?v=_b4jyRE2WhY 

 

코드는 간단하나 구현하는데 2시간은 걸렸다.....!!

역시 잘 모르면 고생하는 것.....