本文实例为大家分享了vue简单的图书管理具体代码,供大家参考,具体内容如下
& lt;表类="表table-bg table-border table-bordered”比;
& lt; tr>
& lt; th> ID
& lt; th>书名& lt;/th>
& lt; th>作者& lt;/th>
& lt; th>价格& lt;/th>
& lt; th>操作& lt;/th>
& lt;/tr>
& lt; tr v=笆槭?指数”比;
& lt; td> {{book.id}} & lt;/td>
& lt; td> {{book.name}} & lt;/td>
& lt; td> {{book.author}} & lt;/td>
& lt; td> {{book.price}} & lt;/td>
& lt; td>
& lt;按钮类=癰tn @click”=癲elBook(指数)”在删除& lt;/button>
& lt;/td>
& lt;/tr>
& lt;/table>
& lt; fieldset>
& lt; legend>添加新书& lt;/legend>
& lt; p>书名:& lt;输入类型=v模型“文本”=皀ewBook.name祝辞& lt;/p>
& lt; p> & lt;输入类型=拔谋尽眝模型=皀ewBook.author祝辞& lt;/p>
& lt; p>价格:& lt;输入类型=v模型“文本”=皀ewBook.price祝辞& lt;/p>
& lt; p> & lt;按钮类=癰tn”@click=毕颉白４翘砑? lt;/button> & lt;/p>
& lt;/fieldset>
& lt; script>
新Vue ({
埃尔:“#书”,
数据:{
书:[
{id: 1,名字:“红楼梦”,作者:“曹雪芹”,价格:' 1 '},
{id: 2、名称:“西游记”,作者:“吴承恩”,价格:' 2 '},
{id: 3、名称:“水浒传》,作者:“施耐庵”,价格:' 3 '}
),
newBook: {
id: 0,
名称:”,
作者:”,
价格:“
}
}，
方法:{
delBook:函数(idx) {
如果(window.confirm(“确认要删除?”)){
this.books。拼接(idx, 1);
}
}，
向:函数(){//约束
如果(this.newBook.name.length==0) {
alert('书名不能为空的);
返回;
}
如果(this.newBook.author。长度==0){
alert('书的作者不能为空的);
返回;
}
如果(this.newBook.price。长度==0){
this.newBook。价格=' 0 '
}//计算插入id
var maxId=0;
(var=0;i
之前
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
