html部分
<template>
<div v-for="(item, index) in listData" :key="index" @click="changeTable(index)"
:class="tableIndex == index ? 'activeATable' : ''" >
{{ item.name}}
</div>
</template>
初始化和点击触发方法
<script>
data(){
return{
tableIndex:"0",
listData:[{id:'1',name:'草莓'},{id:' 2',name:'哈密瓜'},{id:'3',name:'小金橘'}]
},
methods:{
changeTable (index) = {
this.tableIndex = index
}
}
}
</script>
高亮样式显示
<style scoped>
.activeATable {
color: #03358E;
}
</style>
这个是简单的实现选择后高亮效果,将其中的index换成id效果更好。
本文介绍了如何在Vue.js应用中使用模板和数据绑定实现一个简单的列表,当用户点击列表项时,对应的索引或ID会高亮显示。通过`v-for`指令遍历`listData`,并利用`click`事件和`changeTable`方法控制高亮状态。
183

被折叠的 条评论
为什么被折叠?



