vue.js實(shí)現(xiàn)圖書管理功能
更新時(shí)間：2019年09月24日 12:04:17 作者：Dwell_hls
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)圖書管理功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue.js實(shí)現(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>價(jià)格：</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="">價(jià)格</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() {
//計(jì)算書的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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue搜索頁開發(fā)實(shí)例代碼詳解（熱門搜索，歷史搜索，淘寶接口演示）
這篇文章主要介紹了vue搜索頁開發(fā)實(shí)例（熱門搜索，歷史搜索，淘寶接口演示）,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
Ant Design moment對象和字符串之間的相互轉(zhuǎn)化教程
這篇文章主要介紹了Ant Design moment對象和字符串之間的相互轉(zhuǎn)化教程，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了Django+vue跨域問題解決的詳細(xì)步驟,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)購物車列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
簡單的vue-resourse獲取json并應(yīng)用到模板示例
本篇文章主要介紹了簡單的vue-resourse獲取json并應(yīng)用到模板示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。2017-02-02
使用Vue Composition API寫出清晰、可擴(kuò)展的表單實(shí)現(xiàn)
這篇文章主要介紹了使用Vue Composition API寫出清晰、可擴(kuò)展的表單實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Vue項(xiàng)目如何引入bootstrap、elementUI、echarts
這篇文章主要介紹了Vue項(xiàng)目如何引入bootstrap、elementUI、echarts,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
vue 點(diǎn)擊按鈕實(shí)現(xiàn)動態(tài)掛載子組件的方法
今天小編就為大家分享一篇vue 點(diǎn)擊按鈕實(shí)現(xiàn)動態(tài)掛載子組件的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了Ant Design封裝年份選擇組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
VuePress 由兩部分組成：一個(gè)以 Vue 驅(qū)動的主題系統(tǒng)的簡約靜態(tài)網(wǎng)站生成工具，和一個(gè)為編寫技術(shù)文檔而優(yōu)化的默認(rèn)主題。它是為了支持 Vue 子項(xiàng)目的文檔需求而創(chuàng)建的2019-11-11