使用vue2.0与bootstrap3进行简单列表分页

最新推荐文章于 2024-07-09 21:24:03 发布

At小小程序媛

最新推荐文章于 2024-07-09 21:24:03 发布

阅读量2.5k

点赞数

分类专栏：前端文章标签： bootstrap 分页 vue vue-js vue2-0

本文链接：https://blog.csdn.net/onlyjin/article/details/78393218

版权

本文展示了如何在Vue2.0项目中利用Bootstrap3的样式和组件，实现一个简单的列表分页功能。通过直接引入Vue.js文件，不依赖Vuex，提供了可直接运行的源码。

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

直接引入vue的js文件进行页面渲染分页，不是vuex的哦，以下源码可以直接运行哟^_^

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>使用vue2.0与bootstrap3进行简单列表分页</title>
        <link href="http://v3.bootcss.com/dist/css/bootstrap.min.css" rel="stylesheet">
        <script type="text/javascript" src="https://cn.vuejs.org/js/vue.js"></script>
    </head>
    <body>

        <div class="bs-example" id="table">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>名称</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-if="listData.length>0"  v-for="item in listData">
                        <th scope="row">{
   {
   item.id}}</th>
                        <td>{
   {
   item.name}}</td>
                        <td>
                            <button v-on:click="editItem(item.id)" class="btn btn-default" >编辑</button>
                            <button v-on:click="deleteItem(item.id)" class="btn btn-default" >删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td colspan=3>
                            <div id="pagelist">
                                    <div class="row">
                                        <div class="col-sm-6" style="line-height: 80px">
                                            <div class="dataTables_info" id="sample-table-2_info">