vue sku商品规格多选

vue sku商品规格多选

1.创建一个数据对象,用于存储SKU的选中状态。例如,可以使用一个数组来表示选中的SKU,每个元素代表一个SKU选项的id。

复制代码
data() {
  return {
    selectedOptions: []
  }
}

2.在SKU选项列表中,使用v-bind:class绑定一个计算属性来判断当前选项是否被选中,如果选中则添加一个高亮的CSS类。

复制代码
<div v-for="option in options" :key="option.id" :class="{'highlighted': isSelected(option.id)}">
  <!-- SKU选项内容 -->
</div>

3.在点击SKU选项时,触发一个方法来更新选中状态。可以使用v-on:click绑定一个方法,在方法中切换选中状态。

复制代码
<div v-for="option in options" :key="option.id" :class="{'highlighted': isSelected(option.id)}" @click="toggleOption(option.id)">
  <!-- SKU选项内容 -->
</div>


methods: {
 isSelected(optionId) {
    return this.selectedOptions.includes(optionId);
  },
  toggleOption(optionId) {
    if (this.selectedOptions.includes(optionId)) {
      // 如果已经选中,则取消选中
      this.selectedOptions = this.selectedOptions.filter(id => id !== optionId);
    } else {
      // 如果未选中,则添加选中
      this.selectedOptions.push(optionId);
    }
  }
}

通过以上步骤,在Vue中可以实现SKU多选高亮的效果。当用户点击某个SKU选项时

相关推荐
Mintopia2 分钟前
计算机图形学进阶探索与实践
前端·javascript·计算机图形学
代码小学僧4 分钟前
团队协作必备!pnpm 版本管理与 corepack 使用指南
前端·node.js·团队管理
一天睡25小时4 分钟前
前端工程化&&Webpack 和 Vite 的区别
前端·前端框架
gxn_mmf5 分钟前
页面需要重加载才能显示的问题修改
前端·bug
北京_宏哥6 分钟前
🔥Jmeter(二十五) - 从入门到精通 - JMeter函数 - 下篇(详解教程)
前端·jmeter·面试
天生我材必有用_吴用7 分钟前
鸿蒙开发入门到进阶:从布局基础到组件实战
前端·harmonyos·arkts
zhangxiao8 分钟前
自定义指令 - 去除所有空格和换行
前端
三思而后行,慎承诺9 分钟前
详解React Fiber架构中,reconcile阶段的具体工作流程
javascript·react.js·ecmascript
前端太佬10 分钟前
微信公众号网页登录:前端视角下的技术实现精要
前端·javascript·微信