商品suk规格简写

最新推荐文章于 2024-10-11 19:03:40 发布

大团米线

最新推荐文章于 2024-10-11 19:03:40 发布

阅读量232

点赞数

分类专栏：前端文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_60500942/article/details/127467525

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

这篇博客展示了如何在Vue.js中使用`v-for`指令动态渲染数据，并结合`v-bind:key`实现列表渲染。同时，通过`v-on:click`事件监听处理函数`handelClickAddActive`，实现了点击激活元素的背景颜色切换。示例代码包含了一个多级筛选的数据结构，用于颜色、重量和尺寸的选择。

摘要由CSDN通过智能技术生成

<template>
  <div class="home">
    <div class="suk" v-for="(item, index) of data" :key="index">
      <div style="font-size: 16px; font-weight: 700;">
        {{item.title}}
      </div>
      <span v-for="(c,i) of item.children" :key="i" :class="arr[index] == c.id ? 'active' : ''"
        @click="handelClickAddActive(index,c.id)">{{c.suk}}</span>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'


const arr = reactive([])


/***
 * @descirption 模拟后端返回数据
 */
const data = reactive([
  {
    title: '颜色', children: [
      { suk: '黄色', id: 1 },
      { suk: '黄色', id: 2 }
    ],
  },
  {
    title: '重量', children: [{
      suk: '0.5kg',
      id: 3
    }, {
      suk: '1kg',
      id: 4
    }]
  },
  {
    title: '尺寸', children: [{
      suk: '20',
      id: 5
    }, {
      suk: '15',
      id: 6
    }],
  },
])


/**
 * 
 * @param {*} i 
 * @param {*} id 
 * @descirpton 初始化为第一个
 */
 data.forEach((item,index) => {
   arr[index] = item.children[0].id
 })



/**
 * 
 * @param {*} i 
 * @param {*} id 
 * @descirpton 赋值
 */
const handelClickAddActive = (i, id) => {
  /***
   * @descirpton 这是 V3 
   */
  arr[i] = id

  /***
   * @descirpton 这是 V2
   */
  //  this.$set(this.arr,i,id)
}





</script>
<style lang="scss">
.home {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.suk {
  display: flex;

  span {
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-left: 20px;
  }
}

.active {
  background: red;
  color: #fff;
}
</style>