Vue 2.0 + bootstarp的demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        tr{
            vertical-align: inherit;
        }
    </style>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/vue.js"></script>
    <script>
        window.οnlοad= function(){
            var vm = new Vue({
                el:'#container',
                data:{
                    myData:[],
                    username:'',
                    age:''
                },
                methods:{
                    add:function(){
                        this.myData.push({
                            name:this.username,
                            age:this.age
                        });
                        this.username="";
                        this.age="";
                    },
                    reset:function(){
                        this.username="";
                        this.age="";
                    },
                    del:function(index){
                        this.myData.splice(index,1)
                    },
                    delAll:function(){
                        this.myData=[];
                    }
                }
            })
        }
    </script>
</head>
<body>
    <div id="container">
        <form role="form">
            <div class="form-group">
                <label for="username">用户名：</label>
                <input placeholder="输入用户名" type="text"
                       v-model="username"
                       id="username" class="form-control">
            </div>
            <div class="form-group">
                <label for="age">年龄：</label>
                <input placeholder="输入年龄" type="text"
                       v-model="age"
                       id="age" class="form-control">
            </div>
            <div class="form-group">
                <input type="button" class="btn btn-info" v-on:click="add()" value="添加">
                <input type="button" class="btn btn-info" v-on:click="reset()" value="重置">
            </div>
        </form>
        <hr>
        <table class="table table-bordered table-hover">
            <caption>用户信息表</caption>
            <tr class="text-danger">
                <td class="text-center">序号</td>
                <td class="text-center">名字</td>
                <td class="text-center">年龄</td>
                <td class="text-center">操作</td>
            </tr>
            <tr v-for="(item,index) in myData">
                <td class="text-center">{{index+1}}</td>
                <td class="text-center">{{item.name}}</td>
                <td class="text-center">{{item.age}}</td>
                <td class="text-center">
                    <button class="btn btn-danger btn-sm"
                        v-on:click="del(index)"
                        data-toggle="dialog" data-target="#layer"
                    >删除</button>
                </td>
            </tr>
            <tr v-show="myData.length!=0">
                <td colspan="4" class="text-right">
                    <button v-on:click="delAll()" class="btn btn-danger btn-sm">删除全部</button>
                </td>
            </tr>
            <tr v-show="myData.length==0">
                <td colspan="4" class="text-center">
                    <p>暂无数据</p>
                </td>
            </tr>
        </table>
    </div>


</body>
</html>

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qq_35776392/article/details/78322780
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-05-28 22:40:31
阅读 ( 400 )
分类：前端

Vue 2.0 + bootstarp的demo

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看