+
95
-

vue如何实现模糊查询及动态数据排序?

vue如何实现模糊查询及动态数据排序?

网友回复

+
15
-

通过filter和sort来实现,具体示例代码如下:

<!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:{
                p...

点击查看剩余70%

我知道答案,我要回答