vue实现选中效果
<li v-for="(item,index) in itemData " :key="index"><el-buttonv-bind:class="{active:item.id==link}"type="text"...
·
<li v-for="(item,index) in itemData " :key="index">
<el-button
v-bind:class="{
active:item.id==link}"
type="text"
icon="el-icon-folder"
@click="getDiary(item)"
>{{item.title}}</el-button>
</li>
关键部分
实现选中的部分
v-bind:class="{active:item.id==link}"
css
.active {
color: #409eff;
}
data
data () {
return {
link: '' // 当前选中的分类
}
}
methods
getDiary(item){
this.link = item.id
}
active: 自定义选中的css属性名称
item.id: 此例中为每一个循环的id
link: 全局定义的要选中的选项
实现思路
点击每一个列表选项时,给全局变量link赋值唯一id
选中css样式添加条件为link=当前选项的id
更多推荐
已为社区贡献4条内容
所有评论(0)