我在写页面的时候老是机会遇见一个问题:
比如我要写一个一排的组件,我想要让每一个组件在点击之后都可以进行按下的样式。我要怎么做呢?
首先,这个问题,我们先定义两个样式,aside-list和active,当我们的数据activeId等于item.id的时候显示active的样式。先给acriveId一个初始值为1(默认为第一个样式),写一个点击事件handel,当div被点击时,将item.id赋值给activeId。这样active就会显示。
下面这个代码不能直接使用,只是一个逻辑:
<div v-for="(item,index) in asideData" :key="item.id" @active="handel(item.id)"
class="aside-list" :class="{ 'active': activeId == item.id }">
<div>aaa<div>
</div>
<script>
const asideData = ref([
{
id:1,
name:'a
} ,
{
id:2,
name:'a
}, {
id:3,
name:'a
} ,{
id:4,
name:'a
}
])
const activeId = ref(1)
const handel = (id)=>{
activeId = id
}
</script>
<style>
.aside-list{
width:100px;
height:100px;
}
.active{
width:100px;
height:100px;
backaground:red;
}
</style>