html输入框模糊查询,vue input输入框模糊查询的示例代码

HTML输入框模糊查询示例代码：

<input type="text" placeholder="请输入关键词" id="input">
<ul id="list">
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
    <li>梨子</li>
    <li>葡萄</li>
</ul>

const input = document.getElementById('input');
const list = document.getElementById('list');
const items = list.getElementsByTagName('li');

input.addEventListener('input', function() {
    const keyword = this.value.trim().toLowerCase();
    for (let i = 0; i < items.length; i++) {
        const item = items[i];
        if (item.innerText.toLowerCase().indexOf(keyword) !== -1) {
            item.style.display = 'block';
        } else {
            item.style.display = 'none';
        }
    }
});

Vue输入框模糊查询示例代码：

<template>
    <div>
        <input type="text" placeholder="请输入关键词" v-model="keyword">
        <ul>
            <li v-for="item in filteredList">{{ item }}</li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: ['苹果', '香蕉', '橙子', '梨子', '葡萄'],
            keyword: '',
        }
    },
    computed: {
        filteredList() {
            const keyword = this.keyword.trim().toLowerCase();
            return this.list.filter(item => item.toLowerCase().indexOf(keyword) !== -1);
        }
    }
};
</script>

以上代码均为简单的示例代码，实际应用中需要根据具体情况进行修改和完善。