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

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

搜索效果`


<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>

你可能感兴趣的:(计算机编程)