给我“爱你”好评好不啦

你的评价炒鸡重要

炒鸡重要滴~

html

<article class="feedback">
  <!-- 评价1 -->
  <ul>
    <li style="line-height: 32px;font-weight:bold">外貌协会</li>
    <li v-for="item,index in items"><img :src="item.src" @click="addClass(index)" :class="{active:index==current}"/></li>
  </ul>
  <!-- 评价2 -->
  <ul>
    <li style="line-height: 32px;font-weight:bold">内涵会所</li>
    <li v-for="item,index in items"><img :src="item.src" @click="addClass2(index)" :class="{active:index==current2}"/></li>
  </ul>
</article>

js

import imgIcon1 from '../assets/img/icon/爱你.svg';
import imgIcon2 from '../assets/img/icon/可爱.svg';
import imgIcon3 from '../assets/img/icon/微笑.svg';
import imgIcon4 from '../assets/img/icon/难过.svg';
import imgIcon5 from '../assets/img/icon/大哭.svg';
export default {
  name: 'feedback',
  data(){
    return {
      current: -1,
      current2: -1,
      items: [
        {src: imgIcon1},
        {src: imgIcon2},
        {src: imgIcon3},
        {src: imgIcon4},
        {src: imgIcon5}
      ]
    }
  },
  methods: {
    addClass(index){
      this.current = index;
    },
    addClass2(index){
      this.current2 = index;
    },
  }
}

css

.feedback{margin: 50px 0;}
.feedback>ul{
  margin-right: 50px;
}
.feedback>ul>li{
  list-style: none;
  float: left;
  margin: 10px;
}
.feedback li>img:hover, .active{transform: scale(1.5);}