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

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

搜索效果`

<!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>
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值