activeIndex获取的结果是数组,activeIndex.value获取到的才是数字,根据之前的代码进行修改
时间: 2024-04-15 14:28:53 浏览: 102
非常抱歉,我之前的回答有误。在Vue 3中,使用`ref`创建的响应式变量需要通过`.value`来访问其值。所以你是正确的,`activeIndex`是一个ref对象,而不是直接的数字。
因此,你需要修改你的代码来使用`activeIndex.value`来获取活动索引的值。
下面是修改后的代码:
```html
<template>
<div>
<ul>
<li v-for="(option, index) in conto" :key="index" :class="{'noww': activeIndex.value === index}" @click="toggleActive(index)">
{{ option.category_title }}
</li>
</ul>
<div class="cont" v-show="activeIndex.value === 0">
<ul>
<li v-for="option2 in cont" :key="option2" :class="parseInt(option2.stock) === 1 ? 'olik' : ''">
<a :href="option2.source" target="_blank">
<div class="contimg">
<img :src="option2.bigpic" alt="{{option2.title}}">
</div>
<div class="context">
<span>
<img :src="option2.smallpic" alt="">{{option2.subtitle}}
</span>
<h4><span>{{option2.title}}</span></h4>
<p>{{option2.summary}}</p>
</div>
</a>
</li>
</ul>
</div>
<div class="cont" v-show="activeIndex.value === 1">
<ul>
<li v-for="option2 in cont2" :key="option2" :class="parseInt(option2.stock) === 1 ? 'olik' : ''">
<a :href="option2.source" target="_blank">
<div class="contimg">
<img :src="option2.bigpic" alt="{{option2.title}}">
</div>
<div class="context">
<span>
<img :src="option2.smallpic" alt="">{{option2.subtitle}}
</span>
<h4><span>{{option2.title}}</span></h4>
<p>{{option2.summary}}
</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const activeIndex = ref(0);
function toggleActive(index) {
if (activeIndex.value === index) {
activeIndex.value = null;
} else {
activeIndex.value = index;
}
}
return {
activeIndex,
toggleActive,
};
},
};
</script>
```
现在,你可以使用`activeIndex.value`来获取活动索引的值,并根据该值来显示对应的内容。同时,`toggleActive`函数也已经进行了相应的修改。
阅读全文