도서 관리 예제의 Vue 구현

이 글은 주로 Vue의 라이브러리 관리 구현을 소개하고, 라이브러리 관리 데모에서 사용된 지식 포인트를 공유하며, 관심 있는 친구들이 참고할 수 있기를 바랍니다.

올해 이후 회사의 프로젝트에는 vue.js 지식이 필요합니다. Angular에서는 배운 적이 없으며 node.js와 React에 대해 조금만 알고 있기 때문에 배우기가 어렵습니다. vue.js 지식을 배우고 싶다면 추천 웹사이트: http://vuejs.org/

자세한 내용은 다음과 같습니다.

1. 라이브러리 관리 데모를 위한 지식 포인트

1. 부트스트랩: http: // getbootstrap.com/

2.vuejs: http://getbootstrap.com/

구체적인 코드는 다음과 같습니다.

html part

<p id="app" class="container">
 <table class="table table-bordered">
 <p v-for = "book in books">
  <tr>
  <th>书名</th>
  <th>书的价格</th>
  <th>书的数量</th>
  <th>小计</th>
  <th>操作</th>
  </tr>
  <tr v-for = "(index,book ) in books">
  <td>{{book.name}}</td>
  <td>{{book.price}}</td>
  <td><button @click="book.count&&book.count--">-</button><input type="text" v-model="book.count" /><button @click="book.count++">+</button></td>
  <td>{{book.price*book.count}}</td>
  <td><button class="btn btn-danger" @click="deleteBook(book)">删除</button></td>
  </tr>
  <tr>
  <td colspan="5">
  总价{{total}}
  </td>
  </tr>
 </p>
 </table>
 <p class="form-group">
 <label for="bookname" id="bookname">书名</label>
 <input type="text" v-model="list.name" class="form-control"/>
 </p>
 <p class="form-group">
 <label for="bookprice" id="bookprice">价格</label>
 <input type="text" v-model="list.price" class="form-control"/>
 </p>
 <p class="form-group">
 <label for="bookcount" id="bookcount">数量</label>
 <input type="text" v-model="list.count" class="form-control"/>
 </p>
 <p class="form-group">
 <button class="btn btn-primary" @click="add">添加</button>
 </p>
 </p>

script part

<script src="js/vue.js"></script>
 <script>
 var vm = new Vue({
 el:"#app",
 data:{
  books:[
  {name:&#39;VUE js&#39;,price:40,count:1},
  {name:&#39;NODE js&#39;,price:20,count:1},
  {name:&#39;REACT js&#39;,price:30,count:1},
  {name:&#39;ANGULAR js&#39;,price:100,count:1},
  {name:&#39;JQUERY js&#39;,price:50,count:1},
  ],
  list:{
  name:&#39;&#39;,
  price:&#39;&#39;,
  count:&#39;&#39;
  }
 },
 methods:{
  deleteBook(book){
  // vue 给我们提供了一个 $remove的方法，在数组中删除
  this.books.$remove(book);
  /*this.books = this.books.filter((item)=>{
  return item != book
  })*/
  },
  add(){
  this.books.push(this.list);
  this.list = {
  name:&#39;&#39;,
  price:&#39;&#39;,
  count:&#39;&#39;
  }
  }
 },
 computed:{
  total(){
  var sum = 0;
  this.books.forEach(item =>{
  sum += item.price*item.count;
  })
  return sum;
  }
 }
 });
</script>

요약 어려움이 발생했습니다

수량이 0보다 작을 경우 다양한 판단 방법과 해결책이 있습니다. 아래에 정리된 3가지 방법이 있습니다

(1) 가장 간단한 방법

, 여기서 논리적 판단에 주의하세요. 순서, 코드는 다음과 같습니다.

코드를 복사하세요 코드는 다음과 같습니다.

-+

(2) 여기서 이 점 주의하세요 Question

코드 복사 코드는 다음과 같습니다

-+< ;/td>

methods:{
  min(index){
  if(this.books[index].count>0){
  this.books[index].count = parseInt(this.books[index].count) - 1;
  }
  },
  deleteBook(book){
  // vue 给我们提供了一个 $remove的方法，在数组中删除
  this.books.$remove(book);
  /*this.books = this.books.filter((item)=>{
  return item != book
  })*/
  },
  add(){
  this.books.push(this.list);
  this.list = {
  name:'',
  price:'',
  count:''
  }
  }
 }

(3) v-on 실행 중 매개변수 전달 문제

코드 복사 코드는 다음과 같습니다

-+< /button>

min(book){
 if(book.count>0){
 book.count = parseInt(book.count) - 1;
 }
}

요약:

v- on 메소드 실행 시 매개변수를 전달할 필요가 없으면 ()를 추가하세요. ()를 추가할 필요가 없습니다.
매개변수를 전달해야 하는 경우 이벤트 소스를 수동으로 전달해야 합니다.

관련 권장 사항:

vue.js 라이브러리 관리 플랫폼 구축을 위한 세부 단계

도서관리 시스템 소스코드 php 랜덤 인증코드 생성 이미지코드

Node.js 실제 전투에 가깝다 (2) 도서관리 system_html/css_WEB-ITnose

위 내용은 도서 관리 예제의 Vue 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!