随笔 - 315  文章 - 1  评论 - 12  阅读 - 24万

vue--嵌套循环,分别点击子节点,高亮显示当前点击项

<template>
<div class="hello">
<div class="specs" v-for="(item,index) in arrList" :key="index">
<div>{{item.name}}:</div>
<div class="spec" v-for="(item1,index1) in item.list" :key="index1" @click="orderChange(index,index1)">

<p :class="[States[index]==index1 ? 'activeClass' : '']" > {{item1.name}}{{States[index]}}{{index}}</p>
</div>
</div>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
data () {
return {
States:{},
arrList:[
{
name:'客户等级',
list:[
{
name: '高级'
},
{
name: '中级'
},
{
name: '初级'
}
]
},
{
name:'业主等级',
list:[
{
name: '高级业主'
},
{
name: '中级业主'
},
{
name: '初级业主'
}
]
}
]
}
},
created(){
let index = 0;
var obj={}
var States = {};
for(obj in this.arrList){
States[index] = 0;
index++;
}
this.States = States;
// 0:0 表示specs[0]第一个【高级】高亮显示;1:0 表示specs[1]第一个【高级业主】高亮显示
console.log('默认高亮显示的项:',this.States); // 0:0 ; 1:0
},
methods:{
orderChange(index,index1){
console.log(index,index1);
this.States[index] = index1;
}
}
}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.activeClass{
color: red;
}
</style>

显示结果:

 

 

 
posted on   小虾米吖~  阅读(636)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
历史上的今天:
2018-07-06 ajax---异步请求对象的属性和方法
2018-07-06 ajax----发送异步请求的步骤
2018-07-06 ajax---获取XMLHttpReuquest 对象

点击右上角即可分享
微信分享提示