vue实现选择置顶

Vue 实现选择置顶功能

数据准备

在 Vue 组件中定义一个数组，用于存储需要置顶的数据项。例如：

data() {
  return {
    items: [
      { id: 1, name: 'Item 1', isTop: false },
      { id: 2, name: 'Item 2', isTop: false },
      { id: 3, name: 'Item 3', isTop: false }
    ]
  }
}

置顶方法实现

创建一个方法来处理置顶逻辑，该方法会修改指定项的 isTop 属性并重新排序数组：

methods: {
  toggleTop(item) {
    item.isTop = !item.isTop;
    this.items.sort((a, b) => {
      if (a.isTop === b.isTop) return 0;
      return a.isTop ? -1 : 1;
    });
  }
}

模板渲染

在模板中使用 v-for 渲染列表，并为每个项添加置顶按钮：

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.name }}
    <button @click="toggleTop(item)">
      {{ item.isTop ? '取消置顶' : '置顶' }}
    </button>
  </li>
</ul>

样式优化

可以为置顶项添加特殊样式，使其在视觉上突出显示：

li {
  padding: 8px;
  border-bottom: 1px solid #eee;
}
li.top-item {
  background-color: #f5f5f5;
  font-weight: bold;
}

动态类绑定

使用 Vue 的类绑定功能，根据 isTop 属性动态添加样式类：

<li v-for="item in items" :key="item.id" :class="{ 'top-item': item.isTop }">

完整组件示例

<template>
  <ul>
    <li v-for="item in items" :key="item.id" :class="{ 'top-item': item.isTop }">
      {{ item.name }}
      <button @click="toggleTop(item)">
        {{ item.isTop ? '取消置顶' : '置顶' }}
      </button>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1', isTop: false },
        { id: 2, name: 'Item 2', isTop: false },
        { id: 3, name: 'Item 3', isTop: false }
      ]
    }
  },
  methods: {
    toggleTop(item) {
      item.isTop = !item.isTop;
      this.items.sort((a, b) => {
        if (a.isTop === b.isTop) return 0;
        return a.isTop ? -1 : 1;
      });
    }
  }
}
</script>

<style>
li {
  padding: 8px;
  border-bottom: 1px solid #eee;
}
li.top-item {
  background-color: #f5f5f5;
  font-weight: bold;
}
</style>