今天学习Vue中遇到了一个报错信息：$index is not defined，是我写了个for循环在HTML中，然后是因为版本的问题
下面是解决方法：
原来的是 v-for=”person in items”
v-on:click=”deletePerson($index)”//这个仅仅适用于1.0版本，不要采坑了同学们
这个在Vue1.0版本中式适用的可以直接使用$index，但是在2.0是不适合的
在Vue 2.0版本中获取索引我们需要通过 v-for = “(person ,index) in items “, 点击事件我们也不能使用$index，应该使用
v-on:click=
在Vue.js框架中，$index 是一个特殊变量，它在 Vue 1.x 版本中被用来在 `v-for` 循环中访问当前项的索引。然而，随着 Vue 2.0 的发布，一些 API 和语法进行了调整，其中包括对 `v-for` 的处理方式。当你在 Vue 2.0 中遇到 `$index is not defined` 的错误，这通常意味着你还在尝试使用 Vue 1.x 的语法。
在 Vue 1.x 中，你可能会看到这样的代码：
```html
<ul>
<li v-for="person in items" v-on:click="deletePerson($index)">
{{ person.name }}
</li>
</ul>
```
这里的 `v-on:click="deletePerson($index)"` 使用 `$index` 来传递当前循环项的索引到 `deletePerson` 方法中。
然而，在 Vue 2.0 中，你需要更新你的 `v-for` 结构以及点击事件处理方式。现在，你需要显式地声明并传递索引变量，如下所示：
```html
<ul>
<li v-for="(person, index) in items" @click="deletePerson(index)">
{{ person.name }}
</li>
</ul>
```
这里，`v-for="(person, index) in items"` 会将当前项的值赋给 `person` 变量，而索引则赋给 `index` 变量。在点击事件中，你应该使用 `index` 而不是 `$index` 来调用 `deletePerson` 方法。
关于额外的补充知识，当需要在 Vue 中实现滚动时导航栏样式的改变，例如改变导航栏的透明度，可以利用 Vue 的数据绑定和事件监听来实现。以下是一个简单的例子：
```html
<template>
<div class="commonHeader" :class="{ 'navActive': scrollFlag }">
<img
src="@/images/home/icon_jdjr.png"
:class="{ 'scrollFlag': scrollFlag }"
/>
</div>
</template>
<script>
export default {
data() {
return {
scrollFlag: false,
};
},
mounted() {
window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll);
},
methods: {
handleScroll() {
const _this = this;
const scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
if (scrollTop) {
_this.scrollFlag = true;
} else {
_this.scrollFlag = false;
}
},
},
};
</script>
<style>
.navActive {
/* 在这里定义滚动后导航栏的样式 */
}
.scrollFlag {
/* 在这里定义滚动时图片的样式 */
}
</style>
```
在这个示例中，`handleScroll` 方法会在页面滚动时被触发，根据滚动的距离设置 `scrollFlag` 的值。这个值会被用于条件类绑定，以动态地切换 `navActive` 和 `scrollFlag` 类，从而改变导航栏和图片的样式。记得在组件销毁时移除事件监听器，以防止内存泄漏。
总结起来，解决 Vue 中 `$index is not defined` 错误的关键在于理解 Vue 2.0 对 `v-for` 的新语法，并且正确地在点击事件中传递索引。同时，对于滚动事件监听和导航栏样式的动态改变，可以通过监听滚动事件并根据滚动位置更新组件状态来实现。
