你的评价炒鸡重要
炒鸡重要滴~
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);}
