如何使用Vue实现仿QQ好友列表特效

vue create friend-list-effect

cd friend-list-effect

npm install axios vuex vue-router

<template>
  <div>
    <ul>
      <li v-for="friend in friends" :key="friend.id" @click="toggleActive(friend.id)" :class="{ active: friend.active }">
        {{ friend.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'FriendList',
  data() {
    return {
      friends: [
        { id: 1, name: 'Friend 1', active: false },
        { id: 2, name: 'Friend 2', active: false },
        { id: 3, name: 'Friend 3', active: false },
        // 更多好友...
      ],
    };
  },
  methods: {
    toggleActive(id) {
      this.friends = this.friends.map((friend) => {
        if (friend.id === id) {
          return { ...friend, active: !friend.active };
        }
        return friend;
      });
    },
  },
};
</script>

<template>
  <div>
    <h1>仿QQ好友列表特效</h1>
    <FriendList />
  </div>
</template>

<script>
import FriendList from '../components/FriendList.vue';

export default {
  name: 'Home',
  components: {
    FriendList,
  },
};
</script>

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

<template>
  <div id="app">
    <router-view />
  </div>
</template>

npm run serve