用vue写添加数据、删除数据、筛选数据表格

本文转载自查看原文 2017-07-31 09:56 2131 vue

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="../libs/vue1026.js"></script>
    </head>
    <style>
        #app {
            width: 800px;
            margin: 20px auto;
        }

        #tb {
            width: 800px;
            border-collapse: collapse;
            margin: 20px auto;
        }

        #tb th {
            background-color: #0094ff;
            color: white;
            font-size: 16px;
            padding: 5px;
            text-align: center;
            border: 1px solid black;
        }

        #tb td {
            padding: 5px;
            text-align: center;
            border: 1px solid black;
        }
    </style>
    <body>
        <div id="app">
            <input type="text" v-model="name">
            <button @click="addData">添加数据</button><br>
            <input type="text" placeholder="请输入筛选内容" v-model="uname">
            <table id="tb">
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>时间</th>
                    <th>操作</th>
                </tr>
                <tr v-if="list.length==0">
                    <td colspan="4">当前已经没有数据</td>
                </tr>
                <tr v-for="item in list | filterBy uname in 'name'">
                    <td>{{$index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.ctime}}</td>
                    <td><a href="javascript:;" @click="remove($index)">删除</a></td>
                </tr>
            </table>
        </div>
    </body>
    <script>
        new Vue({
            el:'#app',
            data:{
                list:[
                {name:'宝马',ctime:new Date()},
                {name:'奔驰',ctime:new Date()}
                ],
                name:'',
                uname:''
            },
            methods:{
                addData:function(){
                    var str = {name:this.name,ctime:new Date()};
                    this.list.push(str);
                    this.name="";
                },
                remove:function(id){
                this.list.splice(id,1)
                }
            }

        })
    </script>
</html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 mysql 向字段添加数据或者删除数据 Vue删除数据成功后如何刷新表格数据 Eclipse中java向数据库中添加数据，更新数据，删除数据 Eclipse中java向数据库中添加数据，更新数据，删除数据字典中有多层嵌套字典怎么操作？？（怎么添加数据、删除数据、修改数据） MySQL(四) 数据表的插入、更新、删除数据 MySQL——添加、更新与删除数据 Mysql 删除数据表重复行使用DataGrip删除数据表 Sql Server批量删除数据表