最近會更很多小的demo繁涂，當作初學者的初步學習記錄
1.預期達成
鼠標移入列表乌询，所移入的項修改背景色魂拦，點擊某一項可以修改其背景色
2.實現(xiàn)效果
鼠標移入移出修改背景.gif
3.代碼實現(xiàn)
<template>
<div>
<h1>背景顏色選中及鼠標移入移出效果</h1>
<div>
<ul>
<!-- class還可以通過:class="[currentLi === index ? 'currentLi' : '']"的形式 -->
<li
v-for="(item, index) in fruitList"
:key="`fruititem${index}`"
@click="currentLi = index"
class="fruit-item"
:class="{currentLi: currentLi === index}"
>
當前是否被選中：{{ currentLi === index }}
<p>{{ item.name }}</p>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
fruitList: [
{ name: "香蕉", amount: 30 },
{ name: "蘋果", amount: 80 },
{ name: "西瓜", amount: 20 },
],
currentLi: -1,
};
},
methos: {},
};
</script>
<style lang="scss" scoped>
h1{
font-size: 32px;
text-align: center;
}
.fruit-item {
width: 1200px;
height: 200px;
background: rgb(238, 237, 231);
margin-bottom: 20px;
}
// 選中效果
.currentLi{
background: darksalmon;
}
// 移入效果
.fruit-item, .currentLi{
&:hover{
background: rgb(155, 173, 123);
}
}
</style>
