vue搜索筛选前端处理demo（完整代码）

最新推荐文章于 2024-07-24 10:48:36 发布

就像风1样

最新推荐文章于 2024-07-24 10:48:36 发布

阅读量4.8k

点赞数 2

分类专栏： Vue vue专栏文章标签： vue 筛选

本文链接：https://blog.csdn.net/qq_42221334/article/details/88553293

版权

该博客演示了如何在Vue中实现前端数据筛选功能。通过CDN引入Vue，提供了一个完整的HTML示例代码，只需将其放入新建HTML文件中即可预览效果。文章还鼓励读者查阅作者的Vue专栏获取更多相关技巧。

摘要由CSDN通过智能技术生成

前端获取数据后根据输入内容筛选列表

通过cdn引入vue的方式完整代码，新建个html 代码放里面即可预览

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vue.js 搜索页面</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    
    <style>
    /* 隐藏未编译的变量 */

    [v-cloak] {
      display: none;
    }

    *{
        margin:0;
        padding:0;
    }

    body{
        font:15px/1.3 'Open Sans', sans-serif;
        color: #5e5b64;
        text-align:center;
    }

    a, a:visited {
        outline:none;
        color:#389dc1;
    }

    a:hover{
        text-decoration:none;
    }

    section, footer, header, aside, nav{
        display: block;
    }


    /*-------------------------
        搜索输入框
    --------------------------*/

    .bar{
        background-color:#5c9bb7;

        background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad);
        background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad);
        background-image:linear-gradient(top, #5c9bb7, #5392ad);

        box-shadow: 0 1px 1px #ccc;
        border-radius: 2px;
        width: 400px;
        pa