使用Vue过滤器和计算属性,分别完成一个表格的动态筛选功能,有没有大神会Vue的，帮忙看一下

最新推荐文章于 2024-08-14 18:11:18 发布

Hacker_2020

最新推荐文章于 2024-08-14 18:11:18 发布

阅读量2.6k

点赞数 2

分类专栏：前端文章标签： Vue .NET 前端过滤器计算属性

本文链接：https://blog.csdn.net/weixin_40362806/article/details/82682097

版权

前端专栏收录该内容

34 篇文章 5 订阅

订阅专栏

使用过滤器和计算属性,完成一个表格的动态筛选功能,并且在实例对象创建之后进行对象的挂载
表格实现，

搜索效果 `

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <div>

    </div>
    SearchByName:<input type="text" id="txt1" v-model="txt1" />

    <table id="table1" style="width:40%;" border="1">
        <tr v-for="items in stu">
            <td v-if="Sum||filter1(items.Name)">{{items.Name}}</td>
            <td>{{items.Gender}}</td>
            <td>{{items.Age}}</td>
        </tr>
    </table>
    <script src="scripts/vue.js"></script>
    <script>
        //先声明数组
        var stus = [{ Name: 'Jack', Gender: 'male', Age: '26' }, { Name: 'John', Gender: 'female', Age: '20' }, { Name: 'Lucy', Gender: 'female', Age: '16' }];

        var vm = new Vue({
            //el: '#myVue',  挂载
            data: {
                stu: stus,
                txt1: '请输入',
                sum:0
            },
            //计算属性
        computed: {
              fun:function(){}
            },
            //过滤器filters
            filters: {
                filter1: function (sum,name) {
                    if(name=="Jack"){
                        sum: 0;
                    }
                }
            }
        }).$mount('#table1');
    </script>
</body>
</html>