vue.js實現(xiàn)圖書管理功能
更新時間：2019年09月24日 12:04:17 作者：Dwell_hls
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)圖書管理功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue.js實現(xiàn)圖書管理功能的具體代碼，供大家參考，具體內(nèi)容如下
<!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>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<table rules="rows" frame="hsides" bordercolor="black" width="600px">
<tr v-for="book in books " text-align="center">
<th>序號：</th>
<td>{{book.id}}</td>
<th>書名：</th>
<td>{{book.name}}</td>
<th>作者：</th>
<td>{{book.author}}</td>
<th>價格：</th>
<td>{{book.price}}</td>
<td>
<button type="button" class="btn btn-danger" @click="delBook(book)">刪除</button>
</td>
</tr>
</table>
<br>
<div id="add-book">
<legend>添加書籍</legend>
<br>
<div>
<label for="">書名</label>
<input type="text" v-model="book.name">
</div>
<div>
<label for="">作者</label>
<input type="text" v-model="book.author">
</div>
<div>
<label for="">價格</label>
<input type="text" v-model="book.price">
</div>
<br>
<button v-on:click="addBook()">添加</button>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
book: {
id: 0,
author: '',
name: '',
price: ''
},
books: [{
id: 1,
author: '曹雪芹',
name: '紅樓夢',
price: 32.0
}, {
id: 2,
author: '施耐庵',
name: '水滸傳',
price: 30.0
}, {
id: 3,
author: '羅貫中',
name: '三國演義',
price: 24.0
}, {
id: 4,
author: '吳承恩',
name: '西游記',
price: 20.0
}]
},
methods: {
addBook: function() {
//計算書的id
this.book.id = this.books.length + 1;
this.books.push(this.book);
//將input中的數(shù)據(jù)重置
this.book = {};
},
delBook: function(book) {
this.books.splice(this.books.indexOf(book),1);
}
}
})
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue搜索頁開發(fā)實例代碼詳解（熱門搜索，歷史搜索，淘寶接口演示）
這篇文章主要介紹了vue搜索頁開發(fā)實例（熱門搜索，歷史搜索，淘寶接口演示）,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
Ant Design moment對象和字符串之間的相互轉化教程
這篇文章主要介紹了Ant Design moment對象和字符串之間的相互轉化教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了Django+vue跨域問題解決的詳細步驟,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01
這篇文章主要為大家詳細介紹了vue實現(xiàn)購物車列表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
本篇文章主要介紹了簡單的vue-resourse獲取json并應用到模板示例，非常具有實用價值，需要的朋友可以參考下。2017-02-02
使用Vue Composition API寫出清晰、可擴展的表單實現(xiàn)
這篇文章主要介紹了使用Vue Composition API寫出清晰、可擴展的表單實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
Vue項目如何引入bootstrap、elementUI、echarts
這篇文章主要介紹了Vue項目如何引入bootstrap、elementUI、echarts,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-11-11
vue 點擊按鈕實現(xiàn)動態(tài)掛載子組件的方法
今天小編就為大家分享一篇vue 點擊按鈕實現(xiàn)動態(tài)掛載子組件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了Ant Design封裝年份選擇組件的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
VuePress 由兩部分組成：一個以 Vue 驅動的主題系統(tǒng)的簡約靜態(tài)網(wǎng)站生成工具，和一個為編寫技術文檔而優(yōu)化的默認主題。它是為了支持 Vue 子項目的文檔需求而創(chuàng)建的2019-11-11