Trong bài đăng này, chúng tôi sẽ cung cấp cho bạn thông tin về Ví dụ thả xuống Vue JS MultiSelect. Hãy nghe chúng tôi cung cấp cho bạn thông tin chi tiết về Ví dụ thả xuống đa lựa chọn của Vue JS Và cách sử dụng nó cũng cung cấp cho bạn bản demo cho nó nếu cần thiết
chúng ta sẽ tìm hiểu cách sử dụng thành phần hộp thả xuống nhiều lựa chọn trong vue js. chúng ta cũng có thể dễ dàng sử dụng trình đơn thả xuống đa lựa chọn vue trong ứng dụng laravel. chúng tôi sẽ sử dụng gói npm vue-multiselect cho trình đơn thả xuống nhiều lựa chọn của bootstrap vue giống như thẻ chọn trong vue. js
gói vue-multiselect cung cấp một số tùy chọn cho hộp nhiều lựa chọn như. có thể tìm kiếm,. nhiều,. tùy chọn,. đóng khi chọn,. nhãn hiển thị, v.v. gói vue-multiselect thật tuyệt vời khi sử dụng bố cục đó thật tuyệt
Bạn có thể làm theo các lệnh từng bước để sử dụng hộp thả xuống nhiều lựa chọn trong vue js. vì vậy hãy làm theo
Bước 1. Tạo ứng dụng Vue
trước tiên chúng ta cần tạo ứng dụng vue cli bằng lệnh dưới đây
vue create myapp
Bước 2. Cài đặt gói vue-multiselect
Ở đây chúng ta cần cài đặt gói npm vue-multiselect cho phép thực hiện yêu cầu http
npm install vue-multiselect
Xem thêm. Vue JS – Mở liên kết trong tab mới Ví dụ
Bước 3. Đã cập nhật thành phần HelloWorld
Ở đây, chúng ta sẽ tạo HelloWorld. thành phần vue với đoạn mã sau
src/thành phần/HelloWorld. vue
Vue JS MultiSelect Dropdown Example - ItSolutionStuff.com
import Multiselect from 'vue-multiselect'
export default {
components: { Multiselect },
data [] {
return {
selected: null,
options: ['Laravel', 'Laravel 5', 'Vue JS', 'ItSolutionStuff.com', 'HDTuto.com']
}
}
}
>
Bây giờ bạn có thể chạy ứng dụng vue bằng cách sử dụng lệnh sau
Xem thêm. Ví dụ về thông báo phương thức Vue Js Sweetalert
npm run serve
Bạn có thể xem tài liệu chính thức từ đây.
Tôi hy vọng nó có thể giúp bạn…
Hy vọng mã và bài đăng này sẽ giúp bạn triển khai Ví dụ thả xuống Vue JS MultiSelect. nếu bạn cần bất kỳ trợ giúp hoặc bất kỳ phản hồi nào, hãy đưa ra trong phần bình luận hoặc bạn có ý tưởng hay về bài đăng này, bạn có thể đưa ra phần bình luận. Nhận xét của bạn sẽ giúp chúng tôi giúp bạn nhiều hơn và cải thiện chúng tôi. chúng tôi cũng sẽ cung cấp cho bạn loại bài đăng thú vị hơn này trong phần nổi bật,
Để sử dụng thành phần này, bạn phải có giấy phép CoreUI PRO. Mua CoreUI PRO và có quyền truy cập vào tất cả các thành phần, tính năng, mẫu và hỗ trợ chuyên dụng của PRO
Vue đa lựa chọn
Customize the native s with a powerful Multi-Select component that changes the element’s initial appearance and brings some new functionalities.
các khuôn khổ khác
Các thành phần CoreUI có sẵn dưới dạng các thành phần gốc Angular, Bootstrap [Vanilla JS] và React. Để tìm hiểu thêm, vui lòng truy cập các trang sau
- Góc đa lựa chọn
- Bootstrap Đa lựa chọn
- Phản ứng đa lựa chọn
ví dụ
khung
Chọn tất cả các tùy chọn
góc cạnh
Bootstrap
Phản ứng. js
Vue. js
phụ trợ
Django
ấu trùng
Nút. js
Vui lòng chọn khung của bạn
export default {
data: [] => {
return {
options: [
{
value: 0,
text: 'Angular',
},
{
value: 1,
text: 'Bootstrap',
},
{
value: 2,
text: 'React.js',
},
{
value: 3,
text: 'Vue.js',
},
{
label: 'backend',
options: [
{
value: 4,
text: 'Django',
},
{
value: 5,
text: 'Laravel',
},
{
value: 6,
text: 'Node.js',
},
],
},
],
}
},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
Angular xBootstrapLaravel x
Chọn tất cả các tùy chọn
góc cạnh
Bootstrap
Phản ứng. js
Vue. js
phụ trợ
Django
ấu trùng
Nút. js
export default {
data: [] => {
return {
options2: [
{
value: 0,
text: 'Angular',
selected: true
},
{
value: 1,
text: 'Bootstrap',
selected: true,
disabled: true,
},
{
value: 2,
text: 'React.js',
},
{
value: 3,
text: 'Vue.js',
},
{
label: 'backend',
options: [
{
value: 4,
text: 'Django',
},
{
value: 5,
text: 'Laravel',
selected: true,
},
{
value: 6,
text: 'Node.js',
},
],
},
],
}
},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
loại lựa chọn
Phản đối
Chọn tất cả các tùy chọn
góc cạnh
Bootstrap
Phản ứng. js
Vue. js
phụ trợ
Django
ấu trùng
Nút. js
export default {
data: [] => {
return {
options: [
{
value: 0,
text: 'Angular',
selected: true
},
{
value: 1,
text: 'Bootstrap',
selected: true,
disabled: true,
},
{
value: 2,
text: 'React.js',
},
{
value: 3,
text: 'Vue.js',
},
{
label: 'backend',
options: [
{
value: 4,
text: 'Django',
},
{
value: 5,
text: 'Laravel',
selected: true,
},
{
value: 6,
text: 'Node.js',
},
],
},
],
}
},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
thẻ
Angular xBootstrapLaravel x
Chọn tất cả các tùy chọn
góc cạnh
Bootstrap
Phản ứng. js
Vue. js
phụ trợ
Django
ấu trùng
Nút. js
export default {
data: [] => {
return {
options: [
{
value: 0,
text: 'Angular',
selected: true
},
{
value: 1,
text: 'Bootstrap',
selected: true,
disabled: true,
},
{
value: 2,
text: 'React.js',
},
{
value: 3,
text: 'Vue.js',
},
{
label: 'backend',
options: [
{
value: 4,
text: 'Django',
},
{
value: 5,
text: 'Laravel',
selected: true,
},
{
value: 6,
text: 'Node.js',
},
],
},
],
}
},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
Chữ
Góc, Bootstrap, Laravel
Chọn tất cả các tùy chọn
góc cạnh
Bootstrap
Phản ứng. js
Vue. js
phụ trợ
Django
ấu trùng
Nút. js
________số 8_______
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
Lựa chọn đơn
Đặt thuộc tính boolean
export default {
data: [] => {
return {
options2: [
{
value: 0,
text: 'Angular',
selected: true
},
{
value: 1,
text: 'Bootstrap',
selected: true,
disabled: true,
},
{
value: 2,
text: 'React.js',
},
{
value: 3,
text: 'Vue.js',
},
{
label: 'backend',
options: [
{
value: 4,
text: 'Django',
},
{
value: 5,
text: 'Laravel',
selected: true,
},
{
value: 6,
text: 'Node.js',
},
],
},
],
}
},
}
export default {
data: [] => {
return {
options2: [
{
value: 0,
text: 'Angular',
selected: true
},
{
value: 1,
text: 'Bootstrap',
selected: true,
disabled: true,
},
{
value: 2,
text: 'React.js',
},
{
value: 3,
text: 'Vue.js',
},
{
label: 'backend',
options: [
{
value: 4,
text: 'Django',
},
{
value: 5,
text: 'Laravel',
selected: true,
},
{
value: 6,
text: 'Node.js',
},
],
},
],
}
},
}
góc cạnh
Bootstrap
Phản ứng. js
Vue. js
phụ trợ
Django
ấu trùng
Nút. js
export default {
data: [] => {
return {
options: [
{
value: 0,
text: 'Angular',
},
{
value: 1,
text: 'Bootstrap',
},
{
value: 2,
text: 'React.js',
},
{
value: 3,
text: 'Vue.js',
},
{
label: 'backend',
options: [
{
value: 4,
text: 'Django',
},
{
value: 5,
text: 'Laravel',
},
{
value: 6,
text: 'Node.js',
},
],
},
],
}
},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
Tàn tật
Thêm thuộc tính boolean
export default {
data: [] => {
return {
options2: [
{
value: 0,
text: 'Angular',
selected: true
},
{
value: 1,
text: 'Bootstrap',
selected: true,
disabled: true,
},
{
value: 2,
text: 'React.js',
},
{
value: 3,
text: 'Vue.js',
},
{
label: 'backend',
options: [
{
value: 4,
text: 'Django',
},
{
value: 5,
text: 'Laravel',
selected: true,
},
{
value: 6,
text: 'Node.js',
},
],
},
],
}
},
}
Angular xBootstrapLaravel x
Chọn tất cả các tùy chọn
góc cạnh
Bootstrap
Phản ứng. js
Vue. js
phụ trợ
Django
ấu trùng
Nút. js
export default {
data: [] => {
return {
options: [
{
value: 0,
text: 'Angular',
selected: true
},
{
value: 1,
text: 'Bootstrap',
selected: true,
disabled: true,
},
{
value: 2,
text: 'React.js',
},
{
value: 3,
text: 'Vue.js',
},
{
label: 'backend',
options: [
{
value: 4,
text: 'Django',
},
{
value: 5,
text: 'Laravel',
selected: true,
},
{
value: 6,
text: 'Node.js',
},
],
},
],
}
},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
định cỡ
Bạn cũng có thể chọn từ nhiều lựa chọn nhỏ và lớn để phù hợp với các kiểu nhập văn bản có kích thước tương tự của chúng tôi
Chọn tất cả các tùy chọn
góc cạnh
Bootstrap
Phản ứng. js
Vue. js
phụ trợ
Django
ấu trùng
Nút. js
Chọn tất cả các tùy chọn
góc cạnh
Bootstrap
Phản ứng. js
Vue. js
phụ trợ
Django
ấu trùng
Nút. js
Chọn tất cả các tùy chọn
góc cạnh
Bootstrap
Phản ứng. js
Vue. js
phụ trợ
Django
ấu trùng
Nút. js
Chọn tất cả các tùy chọn
góc cạnh
Bootstrap
Phản ứng. js
Vue. js
phụ trợ
Django
ấu trùng
Nút. js
export default {
data: [] => {
return {
options: [
{
value: 0,
text: 'Angular',
selected: true
},
{
value: 1,
text: 'Bootstrap',
selected: true,
disabled: true,
},
{
value: 2,
text: 'React.js',
},
{
value: 3,
text: 'Vue.js',
},
{
label: 'backend',
options: [
{
value: 4,
text: 'Django',
},
{
value: 5,
text: 'Laravel',
selected: true,
},
{
value: 6,
text: 'Node.js',
},
],
},
],
}
},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
tùy chỉnh
biến CSS
Vue đa lựa chọn sử dụng các biến CSS cục bộ trên
export default {
data: [] => {
return {
options2: [
{
value: 0,
text: 'Angular',
selected: true
},
{
value: 1,
text: 'Bootstrap',
selected: true,
disabled: true,
},
{
value: 2,
text: 'React.js',
},
{
value: 3,
text: 'Vue.js',
},
{
label: 'backend',
options: [
{
value: 4,
text: 'Django',
},
{
value: 5,
text: 'Laravel',
selected: true,
},
{
value: 6,
text: 'Node.js',
},
],
},
],
}
},
}