用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批量刪除數據表