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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue2.0頁面前進刷新回退不刷新的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
vue實現(xiàn)把頁面導(dǎo)出成word文件的方法
這篇文章主要為大家詳細介紹了vue實現(xiàn)把頁面導(dǎo)出成word文件的方法,文中的實現(xiàn)步驟講解詳細,并且有詳細的代碼示例,需要的小伙伴可以參考一下2023-10-10
錯誤處理是框架設(shè)計的核心要素之一,框架的錯誤處理好壞,直接決定用戶應(yīng)用程序的健壯性以及用戶開發(fā)應(yīng)用時處理錯誤的心智負擔(dān),本文將從源碼入手,剖析一下Vue3中是如何進行錯誤處理的,需要的可以參考下2024-01-01
計算屬性對于前端開發(fā)來說算是經(jīng)常使用的一個能力了,本文將從代碼層面來給大家介紹下Vue3是如何實現(xiàn)計算屬性的,需要的朋友可以參考下2023-07-07
監(jiān)聽器是Vue3中非常好用的一個特性,用于監(jiān)聽某個響應(yīng)式變量的變化,本文就來介紹一下Vue3中使用監(jiān)聽器的具體實踐,具有一定的參考價值,感興趣的可以了解一下2023-12-12
element-ui中el-table不顯示數(shù)據(jù)的問題解決
這篇文章主要介紹了element-ui中el-table不顯示數(shù)據(jù)的問題解決,這是最近在做列表首頁時遇到的一個問題,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了解讀vant的Uploader上傳問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
在本篇文章里小編給大家整理的是關(guān)于Vue路由前后端設(shè)計的知識點總結(jié)內(nèi)容，需要的朋友們參考下。2019-08-08
vue.js實現(xiàn)數(shù)據(jù)庫的JSON數(shù)據(jù)輸出渲染到html頁面功能示例
這篇文章主要介紹了vue.js實現(xiàn)數(shù)據(jù)庫的JSON數(shù)據(jù)輸出渲染到html頁面功能,結(jié)合實例形式分析了vue.js針對本地json數(shù)據(jù)的讀取、遍歷輸出相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了vue-router 路由傳參用法,結(jié)合實例形式分析了vue-router 路由傳參基本使用方法及操作注意事項,需要的朋友可以參考下2020-03-03