<template> <div> <div class="index-bar"> <span v-for="(letter, index) in letters" :key="index" @click="scrollTo(letter)" > {{ letter }} </span> </div> <ul class="contact-list"> <li v-for="(contact, index) in filteredContacts" :key="index"> {{ contact.name }} </li> </ul> </div> </template> <script> export default { data() { return { contacts: [ { name: "Alice" }, { name: "Bob" }, { name: "Charlie" }, // 其他联系人... ], letters: [], // 存储通讯录中存在的字母 activeLetter: null // 当前选中的字母 }; }, computed: { filteredContacts() { if (this.activeLetter) { // 根据选中的字母过滤联系人 return this.contacts.filter(contact => contact.name.startsWith(this.activeLetter) ); } else { return this.contacts; } } }, methods: { scrollTo(letter) { this.activeLetter = letter; // 滚动到相应字母的位置 const index = this.letters.indexOf(letter); const element = document.getElementById(`index-${index}`); element.scrollIntoView(); } }, mounted() { // 获取通讯录中存在的字母 this.letters = Array.from( new Set(this.contacts.map(contact => contact.name[0])) ).sort(); } }; </script> <style> .index-bar { position: fixed; top: 0; right: 0; z-index: 1; display: flex; flex-direction: column; } .index-bar span { margin: 5px; cursor: pointer; } .contact-list { margin-top: 30px; } .contact-list li { list-style-type: none; } </style> 这段代码的详细介绍

这段代码实现了一个基本的微信通讯录索引条。让我们逐行解释代码的功能：

1. 在HTML的`<template>`标签中，定义了一个包含索引条和联系人列表的`<div>`容器。

2. 在`<div>`容器内部，有一个类名为`index-bar`的`<div>`元素，用于显示索引条。通过`v-for`指令遍历`letters`数组，生成对应的字母索引按钮。

3. 在`<div>`容器内部的下方，有一个类名为`contact-list`的`<ul>`元素，用于显示联系人列表。通过`v-for`指令遍历`filteredContacts`数组，生成联系人列表项。

4. 在`<script>`标签中，使用`export default`导出Vue组件对象。

5. 在Vue组件的`data`中定义了一些数据变量。其中，`contacts`存储通讯录中的联系人数据，`letters`存储通讯录中存在的字母，`activeLetter`用于记录当前选中的字母。

6. 使用计算属性(`computed`)定义了`filteredContacts`，根据选中的字母过滤联系人数据。

7. 定义了一个名为`scrollTo`的方法，用于处理点击索引条字母按钮的操作。在该方法中，将选中的字母赋值给`activeLetter`，然后通过DOM操作将对应字母的位置滚动到可视区域。

8. 在Vue组件的`mounted`生命周期钩子中，初始化`letters`数组，通过`Array.from()`和`Set`对象去重，然后按字母顺序进行排序，以获取通讯录中存在的字母。

9. 在`<style>`标签中，定义了索引条和联系人列表的样式。

以上就是这段代码的详细介绍。希望能对你有所帮助！如果还有其他问题，请随时提问。