How to customize the title of Collapse folding Panel by vant

This article mainly introduces vant how to achieve Collapse folding panel title customization related knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe you read this vant how to achieve Collapse folding panel title customization article will have a harvest, let's take a look at it.

Vant Collapse collapse panel title customization

Vue-cli3+vant implements customization of the title above the folding panel

The code is as follows:

/ / the following content is filled with Guangdong A2323 ¥23.32 53454325432 according to the demand. Use vant folding panel to customize the content.

Effect picture:

Collapse folding panel

Introduction

Place a set of content in multiple folding panels, and click the title of the panel to expand or shrink its content.

Introduce

Import Vue from 'vue';import {Collapse, CollapseItem} from' vant'; Vue.use (Collapse); Vue.use (CollapseItem); Code demonstration

Basic usage

The expanded panel list is controlled by v-model, and activeNames is in array format.

Content content export default {data () {return {activeNames: ['1'],};},}

Based on the basic usage, the accordion mode is required because the page is too long.

Accordion

With accordion, you can set it to accordion mode, expand at most one panel, and activeName is in string format.

Content content export default {data () {return {activeName: '1percent,};},}

Based on the introduction of the above official documentation, the following is to implement your own code logic.

Page rendering:

Data preparation:

Typelist: [{type: "Medical equipment", data: [{name: "handheld Infrared thermometer", name_id: "21", type: "Medical device", type_id: "104"}, {name:" handheld Infrared thermometer ", name_id:" 21 ", type:" Medical device ", type_id:" 104"} {name: "handheld infrared thermometer", name_id: "21", type: "medical equipment", type_id: "104"}, {name:" handheld infrared thermometer ", name_id:" 21 ", type:" medical device ", type_id:" 104}]}, {type: "medical device 1" Data: [{name: "handheld infrared thermometer", name_id: "21", type: "medical device 1", type_id: "105"}, {name: "handheld infrared thermometer", name_id: "21", type: "medical device 1" Type_id: "105"}]}] this is the end of the article on" how to customize the title of Collapse folding panel by vant ". Thank you for reading! I believe that everyone has a certain understanding of "vant how to achieve Collapse folding panel title customization" knowledge, if you want to learn more knowledge, welcome to follow the industry information channel.