<template>
<div>
<!-- <input type="text" v-model="search">-->
<input type="search" v-model="search">
<ul style="font-size:0.05rem ;">
<li v-for="(item,index) in items">
<span>{
{item.name}}</span>
<span>{
{item.msg}}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
search:'',
name1:[
{name:'AAA',msg:'aaa'},
{name:'BBB',msg:'bbb'},
{name:'CCC',msg:'ccc'},
{n
前端实现带输入查询功能匹配下拉框的几种实现方式
最新推荐文章于 2024-08-30 13:44:46 发布
这篇博客展示了如何在前端实现一个带有输入查询功能的下拉框组件。通过使用 Vue.js,当用户在搜索框中输入时,下拉列表会实时过滤并显示匹配的项目。示例代码中,`v-model` 用于双向绑定搜索输入和数据,`computed` 属性用来计算过滤后的数据列表,根据输入值动态更新。
摘要由CSDN通过智能技术生成