当前位置：首页 > VUE

vue实现点选效果

2026-02-17 07:50:40VUE

Vue 实现点选效果的方法

使用 `v-bind` 和 `v-on` 绑定动态类与点击事件

通过 v-bind:class 动态绑定 CSS 类，结合 v-on:click 切换选中状态。以下是一个基础实现：

<template>
  <div 
    v-for="item in items" 
    :key="item.id"
    :class="{ 'active': selectedItem === item.id }"
    @click="selectItem(item.id)"
  >
    {{ item.name }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' }
      ],
      selectedItem: null
    };
  },
  methods: {
    selectItem(id) {
      this.selectedItem = id;
    }
  }
};
</script>

<style>
.active {
  background-color: #42b983;
  color: white;
}
</style>

使用计算属性管理选中状态

通过计算属性判断当前项是否被选中，适合复杂逻辑的场景：

vue实现点选效果

<template>
  <div 
    v-for="item in items" 
    :key="item.id"
    :class="getItemClass(item.id)"
    @click="selectItem(item.id)"
  >
    {{ item.name }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' }
      ],
      selectedItem: null
    };
  },
  computed: {
    getItemClass() {
      return (id) => ({
        'active': this.selectedItem === id,
        'disabled': id === 2 // 示例：额外条件
      });
    }
  },
  methods: {
    selectItem(id) {
      this.selectedItem = id;
    }
  }
};
</script>

使用 Vuex 管理全局选中状态

若需跨组件共享选中状态，可通过 Vuex 实现：

vue实现点选效果

// store.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    selectedItem: null
  },
  mutations: {
    setSelectedItem(state, id) {
      state.selectedItem = id;
    }
  }
});

组件中调用：

<template>
  <div 
    v-for="item in items" 
    :key="item.id"
    :class="{ 'active': $store.state.selectedItem === item.id }"
    @click="$store.commit('setSelectedItem', item.id)"
  >
    {{ item.name }}
  </div>
</template>

使用第三方库实现高级交互

对于拖拽点选等复杂场景，可借助 vuedraggable 或自定义指令：

<template>
  <draggable 
    v-model="items" 
    @start="onDragStart" 
    @end="onDragEnd"
  >
    <div 
      v-for="item in items" 
      :key="item.id"
      :class="{ 'active': selectedItem === item.id }"
      @click="selectItem(item.id)"
    >
      {{ item.name }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';
export default {
  components: { draggable },
  data() {
    return {
      items: [/* ... */],
      selectedItem: null
    };
  },
  methods: {
    selectItem(id) {
      this.selectedItem = id;
    },
    onDragStart() { /* ... */ },
    onDragEnd() { /* ... */ }
  }
};
</script>

注意事项

性能优化：对于长列表，建议使用 Object.freeze 冻结静态数据或虚拟滚动。

无障碍访问：为选中项添加 aria-selected 属性：

<div 
  :aria-selected="selectedItem === item.id"
>
</div>

多选支持：将 selectedItem 改为数组即可实现多选逻辑。

标签: 点选效果

分享给朋友：

react如何添加效果

React 添加动画效果的方法使用 CSS 过渡动画在 React 组件中直接通过 className 或 style 属性应用 CSS 过渡效果。定义 CSS 类包含 transition 属性…

vue实现移动效果

使用 CSS 过渡实现移动效果在 Vue 中，可以通过 v-bind:class 或 v-bind:style 结合 CSS 过渡实现移动效果。定义一个 CSS 类，包含 transition 属性…

vue实现点击高亮效果

实现点击高亮效果的方法在Vue中实现点击高亮效果可以通过多种方式完成，以下是几种常见的方法：方法一：使用动态class绑定通过v-bind:class或简写:class动态切换高亮样式类。…

vue实现定时效果

使用 setInterval 实现定时器在 Vue 中可以通过 setInterval 实现定时效果，适用于周期性任务。在组件的 mounted 钩子中启动定时器，并在 beforeDestroy…

vue实现翻牌效果案例

Vue 实现翻牌效果案例翻牌效果通常用于展示卡片翻转动画，常见于记忆游戏或展示正反面内容。以下是基于 Vue 3 的实现方案：基础翻牌效果实现创建翻转动画的核心是利用 CSS 的 transf…

vue实现毛玻璃效果

实现毛玻璃效果的原理毛玻璃效果（Frosted Glass）主要通过CSS的backdrop-filter属性实现，该属性允许对元素背后的区域应用模糊、颜色偏移等滤镜效果。在Vue中可通过动态样式绑…

vue实现点选效果