简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah> hujung hadapan web> Tutorial H5> teks badan

Vue.jS的ul-li标签仿select标签

php中世界最好的语言
Lepaskan： 2018-03-27 17:35:35
asal
4267 orang telah melayarinya

这次给大家带来Vue.jS的ul-li标签仿select标签，使用Vue.jS的ul-li标签仿select标签注意事项有哪些，下面就是实战案例，一起来看一下。

目标：用ul-li标签结合Vue.js知识做一个模仿select标签的下拉选项列表。

知识点：

组件的写法及运用

组件之间的数据传递（props的运用）

组件之间的数据传递（$emit的运用）

动态数据的绑定（v-bind）

自定义事件通信

效果图：

1、未做任何操作前，下拉列表为隐藏状态

2、点击输入框显示下拉列表

3、 点击列表项，输入框值跟随改变

PS: 为了演示data1, data2两组数据的绑定，实例中创建了两个列表

html代码：

    ul-li模仿select下拉菜单
Salin selepas log masuk

JavaScript代码

Salin selepas log masuk

CSS样式

ul, li { margin: 0; padding: 0; list-style: none; } #selectWrap { width: 250px; padding: 2rem; background: #4682b4; } .searchBox input, .searchBox a { line-height: 1.5rem; height: 1.5rem; margin-bottom: 1rem; padding: 0 5px; vertical-align: middle; border: 1px solid #aaa; border-radius: 5px; outline: none; } .searchBox a { display: inline-block; text-decoration: none; background-color: #b1d85c; } .skill li { font-size: 18px; line-height: 2rem; height: 2rem; padding-left: 5px; cursor: pointer; } .skill li:hover { background-color: #008b45; }
Salin selepas log masuk

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

使用javascript的模块加载器

v-for怎么加载本地静态图片

Atas ialah kandungan terperinci Vue.jS的ul-li标签仿select标签. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
javascript select vue.js
sumber：php.cn
Artikel sebelumnya：iview的select下拉框选项错位怎么处理 Artikel seterusnya：element-ui如何操作table滚动效果
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Strim data daripada API OpenAI menggunakan AJAX, PHP dan acara yang dihantar oleh pelayan Bagaimanakah saya boleh menggunakan Acara Dihantar Pelayan (SSE) untuk menstrim data darip...
daripada 2023-11-11 12:03:23
0
1
497
Ralat Jenis Tidak Ditangkap: Tidak dapat menetapkan sifat yang tidak ditentukan (tetapkan 'innerHTML') Saya cuba membuat halaman web menggunakan php, pada elemen kelas "Continuous TextBox&...
daripada 2023-11-08 21:06:09
0
1
278
Bagaimana untuk mendapatkan nilai RGB warna bernama CSS/HTML dalam JavaScript Saya telah mencipta objek Javascript yang dipanggil [name-rgb]. Asas anda:namedColors={Ali...
daripada 2023-11-06 09:05:50
0
2
210
Mengapa begitu banyak skrip JavaScript menambahkan nombor rawak pada sesuatu? perlanggaran? Saya telah mempelajari JavaScript sejak kebelakangan ini dan telah melihat banyak contoh p...
daripada 2023-11-04 20:00:04
0
2
296
Kenal pasti had prestasi dalam JavaScript Saya cuba mencari kesesakan dalam Javascript saya. Pada asasnya saya sedang membangunkan s...
daripada 2023-10-31 20:47:17
0
1
229
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！