Vue实现图书管理案例

本文实例为大家分享了Vue实现图书管理的具体代码,供大家参考,具体内容如下

案例效果

案例思路

1、图书列表

  • 实现静态列表效果
  • 基于数据实现模板效果
  • 处理每行的操作按钮

2、添加图书

  • 实现表单的静态效果
  • 添加图书表单域数据绑定
  • 添加按钮事件绑定
  • 实现添加业务逻辑

3、修改图书

  • 修改信息填充到表单
  • 修改后重新提交到表单
  • 重用添加和修改方法

4、删除图书

  • 删除按钮绑定时间处理方法
  • 实现删除业务逻辑

5、常用特性应用场景

  • 过滤器(格式化日期)
  • 自定义指令(获取表单焦点)
  • 计算属性(统计图书数量)
  • 侦听器(验证图书和编号的存在性)
  • 生命周期(图书数据处理)

代码

基本样式

<style type="text/css">

.grid {

margin: auto;

width: 550px;

text-align: center;

}

.grid table {

width: 100%;

border-collapse: collapse;

}

.grid th,

td {

padding: 10;

border: 1px dashed orange;

height: 35px;

}

.grid th {

background-color: orange;

}

.grid .book {

width: 550px;

padding-bottom: 10px;

padding-top: 5px;

background-color: lawngreen;

}

.grid .total {

height: 30px;

line-height: 30px;

background-color: lawngreen;

border-top: 1px solid orange;

}

</style>

静态布局

<div id="app">

<div class='grid'>

<div>

<h1>图书管理</h1>

<div class="book">

<div>

<label for='id'>

编号:

</label>

<input type="text" id="id" v-model='id' :disabled='flag' v-focus>

<label for="name">

名称:

</label>

<input type="text" id='name' v-model='name'>

<button @click='handle' :disabled='submitFlag'>提交</button>

</div>

</div>

</div>

<div class='total'>

<span>图书总数:</span><span>{{total}}</span>

</div>

<table>

<thead>

<tr>

<th>编号</th>

<th>名称</th>

<th>时间</th>

<th>操作</th>

</tr>

</thead>

<tbody>

<tr :key="item.id" v-for="item in books">

<td>{{item.id}}</td>

<td>{{item.name}}</td>

<td>{{item.date | format('yyyy-MM-dd hh:MM:ss')}}</td>

<td><a href="" @click.prevent='toEdit(item.id)'>修改</a>

<span>|</span>

<a href="" @click.prevent='deleteBook(item.id)'>删除</a>

</td>

</tr>

</tbody>

</table>

</div>

</div>

效果实现

<script type="text/javascript" src="../js/vue.js"></script>

<script type="text/javascript">

Vue.directive('focus', {

inserted: function (el) {

el.focus();

}

})

Vue.filter('format', function (value, arg) {

function dateFormat(date, format) {

if (typeof date === "string") {

var mts = date.match(/(\/Date\((\d +)\)\/)/);

if (mts && mts.length >= 3) {

date = parseInt(mts[2]);

}

}

date = new Date(date);

if (!date || date.toUTCString() == "Invalid Date") {

return "";

}

var map = {

"M": date.getMonth() + 1, //月份

"d": date.getDate(), //日

"h": date.getHours(), //小时

"m": date.getMinutes(), //分

"s": date.getSeconds(), //秒

"q": Math.floor((date.getMonth() + 3) / 3), //季度

"S": date.getMilliseconds() //毫秒

};

format = format.replace(/([yMdhmsqS])+/g, function (all, t) {

var v = map[t];

if (v != undefined) {

if (all.length > 1) {

v = '0' + v;

v = v.substr(v.length - 2);

}

return v;

} else if (t === 'y') {

return (date.getFullYear() + '').substr(4 - all.length);

}

return all;

});

return format;

}

return dateFormat(value, arg);

})

var vm = new Vue({

el: '#app',

data: {

flag: false,

submitFlag: false,

id: '',

name: '',

books: []

},

methods: {

handle: function () {

if (this.flag) {

// 编辑操作

// 就是根据当前id去更新数组中对应的数据

this.books.some((item) => {

if (item.id == this.id) {

item.name = this.name

// 完成更新操作后终止循环

return true;

}

})

this.flag = false;

} else {

// 添加图书

var book = {};

book.id = this.id;

book.name = this.name;

this.data = '';

this.books.push(book);

}

// 清空表单

this.id = '';

this.name = '';

}, toEdit: function (id) {

// 禁止修改id

this.flag = true;

// 根据id查询出要编辑的数据

var book = this.books.filter(function (item) {

return item.id == id;

});

console.log(book)

// 把获取到的id提交到表单

this.id = book[0].id;

this.name = book[0].name;

},

deleteBook: function (id) {

// 删除图书

// 根据id从数组中查找元素的索引

// var index = this.books.findIndex(function (item) {

// return item.id == id;

// });

// 根据索引删除数组元素

// this.books.splice(index, 1)

// -----------------

// 方法2 通过filter方法进行删除

this.books = this.books.filter(function (item) {

return item.id != id;

})

}

},

computed: {

total: function () {

// 计算图书的总数

return this.books.length;

}

},

watch: {

name: function (val) {

// 验证图书名称是否已经存在

var flag = this.books.some(function (item) { return item.name == val; })

if (flag) {

// 图书名存在

this.submitFlag = true

} else {

// 图书名不存在

this.submitFlag = false

}

}

},

mounted: function () {

// 该生命周期钩子函数被出发的时候。模板已经可以使用

// 一般此时用于获取后台数据,然后把数据填充到模板

var data = [{

id: 1,

name: '三国演义',

date: 252597867777

}, {

id: 2,

name: '水浒传',

date: 564634563453

}, {

id: 3,

name: '红楼梦',

date: 345435345343

}, {

id: 4,

name: '西游记',

date: 345345346533

}]

this.books = data

}

});

</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是 Vue实现图书管理案例 的全部内容, 来源链接: utcz.com/p/219416.html

回到顶部