CSS + JS + Vue 实现 "找相似" 功能

"找相似" 是一个常见的电商或内容推荐功能，通常用于根据当前选中或查看的项目来推荐类似的其他项目。下面是一个使用 Vue.js、CSS 和 JavaScript 实现的简单 "找相似" 功能示例。

Vue 组件

创建一个 FindSimilar.vue 组件：

<template>
  <div>
    <div class="selected-item">
      <h3>当前选中项目：</h3>
      <div>{{ selectedItem.name }}</div>
    </div>
    <button @click="findSimilar">找相似</button>
    <div class="similar-items">
      <h3>相似项目：</h3>
      <div v-for="(item, index) in similarItems" :key="index">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: { id: 1, name: "项目1", category: "A" },
      allItems: [
        { id: 2, name: "项目2", category: "A" },
        { id: 3, name: "项目3", category: "B" },
        { id: 4, name: "项目4", category: "A" },
        // 更多项目...
      ],
      similarItems: [],
    };
  },
  methods: {
    findSimilar() {
      this.similarItems = this.allItems.filter(
        (item) => item.category === this.selectedItem.category && item.id !== this.selectedItem.id
      );
    },
  },
};
</script>

<style scoped>
.selected-item,
.similar-items {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ccc;
}

button {
  margin: 10px 0;
  padding: 10px 20px;
}
</style>

解释

1. 数据和状态: 我们有一个 selectedItem 用于存储当前选中的项目，一个 allItems 数组用于存储所有可用的项目，以及一个 similarItems 数组用于存储找到的相似项目。

2. 找相似逻辑: 我们定义了一个 findSimilar 方法，该方法会筛选出与当前选中项目在相同 category 类别下的其他项目。

3. 展示相似项目: 在模板中，我们用一个 div 来展示找到的相似项目。

这个组件提供了一个基础的 "找相似" 功能。在实际应用中，你可能需要通过更复杂的逻辑或者后端API来找到相似项目。你也可以根据需要进行更多的定制和优化。希望这个简单的示例能帮助你入手！