vue实现模糊查询匹配及排序效果代码-html代码-BFW代码库

vue实现模糊查询匹配及排序效果代码

代码语言：html

所属分类：其他

代码描述：vue实现模糊查询匹配及排序效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>


</head>

<body>

    <div id="test2">
        <h2>模糊查询：</h2>
        <input type="text" v-model="searchName" class="test1">
        <ul class="test1">
            <!--            filterPersons用到过滤运算 computed-->
            <li v-for="(item ,index) in filterPersons" :key="index">{{item.name}}----{{item.age}}</li>
        </ul>

        <h2>排序：</h2>
        <button @click="setOrderType(1)">年龄升序</button>
        <button @click="setOrderType(2)">年龄降序</button>
        <button @click="setOrderType(0)">年龄原序</button>
    </div>




    <script type="text/javascript">
        vm = new Vue ({
            el:'#test2',
            data:{
                persons:[
                    {name:'Bob',age:'21'},
                    {name:'Jack',age:'20'},
                    {name:'Alex',age:'19'},
                    {name:'Rose',age:'23'},
                    {name:'Smith',age:'20'},
                ],
                searchName:'',
  .........完整代码请登录后点击上方下载按钮下载查看