<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>{{title}}</title> <link rel="stylesheet" href="plus/bootstrap-3.3.7-dist/css/bootstrap.min.css"> <link rel="stylesheet" href="css/index.css"> <script src="plus/jquery.min.js"></script> <script src="plus/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <script src="plus/vue.min.js"></script> <script src="plus/axios.min.js"></script> </head> <body> <div class="container" id="vuechek"> <div class="row"> <div class="col-lg-12"> <form class="form-inline" id="title-form"> <div class="form-group"> <label for="title">标题</label> <input type="text" class="form-control" id="title" v-model="title" placeholder="请输入标题"> </div> <button type="button" class="btn btn-default" v-on:click="saveTitle">保存</button> </form> </div> </div> <div class="row"> <div class="col-lg-12 h3 text-info">章节信息</div> </div> <div class="row"> <div class="col-lg-8"> <table class="table table-bordered table-hover text-center"> <tr class="text-info"> <td>#</td> <td>标题</td> <td><span class="glyphicon glyphicon-pencil"></span></td> </tr> <tr class="text-center" v-for="(item, index) in titles"> <td><span v-text="index+1"></span></td> <td> <span v-show="xiugai || item.show" v-text="item.name"></span> <input v-show="xiugai===false && index===currindex " type="text " v-model="item.name "></input> </td> <td> <button v-show="xiugai" type="button " class="btn btn-info btn-sm " v-on:click="updateMsg(index, item) ">修改</button> <button v-show="xiugai===false && index===currindex" type="button " class="btn btn-info btn-sm " v-on:click="saveMsg(index, item.name) ">保存</button> <button type="button" v-on:click="newIndex=index" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#layer">删除</button></td> </tr> <tr v-show="titles.length!=0"> <td colspan="4" class="text-right"><input type="button" @click="newIndex=-1" data-toggle="modal" data-target="#layer" value="删除全部" class="btn btn-sm btn-danger" /> </td> </tr> <tr> <td colspan="4" class="text-center" v-show="titles.length==0"> 暂无数据... </td> </tr> </table> </div> </div> <!--模态框--> <div role="dialog" class="modal fade" id="layer"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal"><span>×</span></button> <h4 class="modal-title">确认删除吗？</h4> </div> <div class="modal-body text-right"> <button class="btn btn-primary btn-sm" data-dismiss="modal">取消</button> <button class="btn btn-danger btn-sm" v-on:click="deleteMsg(newIndex)" data-dismiss="modal">确定</button> </div> </div> </div> </div> </div> <!--container--> </body> <script> var app = new Vue({ el: '#vuechek', data: { title: '', titles: [], newIndex: -100, currindex: -1, xiugai: true }, methods: { saveTitle: function() { axios.post('/add', { title: this.title }) .then(function(response) { app.titles.push({ name: response.data, show: true, }); }) .catch(function(error) { console.log(error); }); }, deleteMsg: function(n) { // alert(n); if (n == -1) { this.titles.splice(0, this.titles.length); } this.titles.splice(n, 1); // this.titles.splice(this.newIndex, 1); //也可以 }, saveMsg(index, item) { this.currindex = -1; this.xiugai = true; console.log('我点了保存', index, item); }, updateMsg: function(n, item) { item.show = false; this.currindex = n; this.xiugai = false; console.log('我点了 修改', this.msg); } } }); </script> </html>