vue增删改查

vue

<!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>&times;</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>

以上是 vue增删改查 的全部内容, 来源链接: utcz.com/z/379862.html

回到顶部