vue多个商品选择与列表显示

超、凢脫俗 2022-12-22 06:30 142阅读 0赞

// mock数据
    classRoom: [
    {
    		"id": "598",
    		"name": "初中课程全套",
    		"now_price": "0.01",
    		"price": "880.00",
    		"classroomCourse": [{
    			"id": "2434"
    		}],
    		"course": [{
    			"id": "504",
    			"name": "初一语文",
    			"is_free": 1
    		}, {
    			"id": "629",
    			"name": "初一初学",
    			"is_free": 1
    		}, ],
    		"isActive": false
    },
    {
    		"id": "598",
    		"name": "高中课程全套",
    		"now_price": "0.01",
    		"price": "880.00",
    		"classroomCourse": [{
    			"id": "2434"
    		}],
    		"course": [{
    			"id": "504",
    			"name": "高一语文1",
    			"is_free": 1
    		}, {
    			"id": "629",
    			"name": "高二数学2",
    			"is_free": 1
    		}, ],
    		"isActive": false
    }
    ]

### 1.处理数据  ###

// 前端js添加 isActive 字段显示隐藏数据（如果后端有类似字段无需此步骤）
    // this.classRoom是要渲染的数据
    this.classRoom.forEach((item ,index) => {
    	this.arr.push(Object.assign({},item,{isActive: false})) // 添加isActive
    })
    // 默认选中价格最低的商品
    var currentMIN = null
    for (var index in this.arr) {
    	var item = this.arr[index]
        if (currentMIN === null) {
    	currentMIN = index
        } else if (Number(item.now_price) < Number(this.arr[currentMIN].now_price)) {
    	currentMIN = index
        }
    }
    this.arr[currentMIN].isActive = true

### 2. 渲染标签  ###

### 3. 渲染标签下的内容 ###

<view v-show="arr[index].isActive" v-for="(item, index) in arr" :key="index">
        <view class="course-name" v-for="(itemChild, i) in item.course" :key="i">
    	    {
       { itemChild.name }}
        </view>
    </view>

### 4. 控制标签高亮和标签内容显示事件  ###

clickTag(index){
    	this.arr[index].isActive = !this.arr[index].isActive
    }

效果1（未选择课程）：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70][]

效果二（选中一个课程）：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70 1][]

效果二（选中多个课程）：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70]: /images/20221120/f39d0bd26e504dccab6635548457ecb1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70 1]: /images/20221120/4524edcf54a6480e99d737cba7528075.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70 2]: /images/20221120/64491e76f9a54dda9884e15848d162b5.png