收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > JavaScript技巧 > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

基于Vue实现图书管理功能

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

<table class="table table-bg table-border table-bordered">
 <tr>
  <th>ID</th>
  <th>书名</th>
  <th>作者</th>
  <th>价格</th>
  <th>操作</th>
 </tr>
 <tr v-for="(book,index) in books">
  <td>{{book.id}}</td>
  <td>{{book.name}}</td>
  <td>{{book.author}}</td>
  <td>{{book.price}}</td>
  <td>
   <button class="btn" @click="delBook(index)">删除</button>
  </td>
 </tr>
</table>

<fieldset>
 <legend>添加新书</legend>
 <p>书名:<input type="text" v-model="newBook.name"></p>
 <p>作者:<input type="text" v-model="newBook.author"></p>
 <p>价格:<input type="text" v-model="newBook.price"></p>
 <p><button class="btn" @click="addBook">添加</button></p>
</fieldset>

<script>
new Vue({
 el:'#books',
 data:{
  books:[
   {id:1, name:'红楼梦', author:'曹雪芹', price:'1'},
   {id:2, name:'西游记', author:'吴承恩', price:'2'},
   {id:3, name:'水浒传', author:'施耐庵', price:'3'}
  ],
  newBook:{
   id:0,
   name:'',
   author:'',
   price:''
  }
 },
 methods:{
  delBook:function(idx){
   if(window.confirm('确认要删除?')){
    this.books.splice(idx, 1);
   }

  },
  addBook:function(){
   // 约束
   if(this.newBook.name.length == 0) {
    alert('书名不能为空');
    return;
   } 

   if(this.newBook.author.length == 0){
    alert('书的作者不能为空');
    return;
   }

   if(this.newBook.price.length == 0){
    this.newBook.price = '0'
   } 

   // 计算插入id
   var maxId = 0;
   for(var i=0; i<this.books.length; i++){
    if(maxId<this.books[i].id){
     maxId = this.books[i].id;
    }
   }
   this.newBook.id = maxId+1;

   // 插入到 books中
   this.books.push(this.newBook);

   // 清空新书
   this.newBook = {};
  }
 }
});
</script>

效果图:

查看图片

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

vue实现图书管理demo详解
年后公司的项目要求用到vue.js知识,我angular没有学,node.js和react也只是了解了一点点,所以学起来比较困难。如果你想学vue.js的知识,推荐网址:http://

如何抽象一个Vue公共组件
之前一直想写一篇关于抽象Vue组件的随笔,无奈一直没想到好的例子。恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象Vu

vue-router 路由基础的详解
vue-router路由基础的详解今天我总结了一下vue-route基础,vue官方推荐的路由。一、起步HTMLdivid="myDiv"h1简单路由/h1router-linkto="/foo"Gotofoo/router-linkrouter-linkto="

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号