【2019/01/12】bootstrap+vue初体验-CSDN博客

本文链接：https://blog.csdn.net/weixin_41835977/article/details/86376069

本文记录了作者初次尝试使用Bootstrap和Vue进行前端开发的经验。通过跟随网易云课程，作者构建了一个基本的HTML TODOList应用，实现了增删功能。在实现过程中，作者发现并修复了教程中关于$index获取和模态框内{{ nowIndex }}值传递的两个错误。

摘要由CSDN通过智能技术生成

Bootstrap实际上也是一个库，主要通过标签的方式，美化界面，依赖Jquery。

此次按照网易云上的课程，做了一个裸HTML网页，实现TODOList界面，添加，删除等功能。

代码如下，原教程里存在两个地方错误，第一个地方就是$index的获取，第二个地方是在模态框里获取{{ nowIndex }}的值。

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <script src="jquery-3.3.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script src="vue.js"></script>
    <title>第一个页面</title>
</head>
<body>
    <div class="container" id="app">
        <form role="form">
            <div class="form-group">
                <label for="username">姓名：</label>
                <input type="text" id="username" class="form-control" placeholder="输入用户名"
                       v-model="username"/>
            </div>
            <div class="form-group">
                <label for="age">年龄：</label>
                <input type="text" id="age" class="form-control" placeholder="输入年龄"
                v-model="age"/>
            </div>
            <div class="form-group">
                <input type="button" value="添加" class="btn btn-primary" v-on:click="addData()"/>
                <input type="button" value="重置" class="btn btn-danger" v-on:click="resetData()"/>
            </div>
        </form>
        <hr>
        <table class="table table-bordered">
        <caption class="h3 text-info">用户信息表</caption>
        <tr>
            <th class="text-center">序号</th>
            <th class="text-center">名字</th>
            <th class="text-center">年龄</th>
            <th class="text-center">操作</th>
        </tr>
        <tr class="text-center" v-for="(value, key) in users">
            <td> {{ key }}</td>
            <td> {{ value.name }}</td>
            <td> {{ value.age }} </td>
            <td>
                <input type="button" class="btn btn-primary btn-sm" value="删除" data-toggle="modal"
                       data-target="#layer" v-on:click="getIndex(key)" />
            </td>
        </tr>
        <tr>
            <td colspan="4" class="text-right" v-show="users.length != 0">
                <input type="button" class="btn btn-danger btn-sm" value="全部删除" v-on:click="deleteAll()"/>
            </td>
        </tr>
        <tr>
            <td colspan="4" class="text-right" v-show="users.length == 0">
                <p class="text-center text-muted">无数据</p>
            </td>
        </tr>
    </table>
    <!--模态框 弹出框-->
        <div role="dialog" class="modal fade" id="layer">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" >
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title">确定要删除吗？</h4>
                </div>
                <div class="modal-body text-right">
                    <button class="btn btn-danger btn-sm"  data-dismiss="modal" v-on:click="deleteData()" >确认</button>
                    <button class="btn btn-primary btn-sm" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    </div>
</body>
<script >
    var nowindex=-100;
    window.onload = function () {
        new Vue({
            el:"#app",
            data:{
                users:[],
                username:"",
                age:""
            },
            methods: {
                addData: function () {
                    this.users.push({
                        name: this.username,
                        age: this.age
                    });
                    this.username = "";
                    this.age = "";
                },
                resetData: function () {
                    this.username = "";
                    this.age = "";
                },
                getIndex: function (key) {
                    nowindex = key;
                },
                deleteData: function () {
                   this.users.splice(nowindex,1);
                },
                deleteAll:function () {
                    this.users.splice(0,this.users.length);
                }

            }
        });
    }

</script>

</html>