vue 도서 관리 데모 상세 설명 실현
자세 한 내용 은 다음 과 같 습 니 다.
1.도서 관리 demo 용 지식
1、bootstrap: http://vuejs.org/
2、vuejs: http://getbootstrap.com/
구체 적 인 코드 는 다음 과 같다.
html 부분
<div id="app" class="container">
<table class="table table-bordered">
<div 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>
</div>
</table>
<div class="form-group">
<label for="bookname" id="bookname"> </label>
<input type="text" v-model="list.name" class="form-control"/>
</div>
<div class="form-group">
<label for="bookprice" id="bookprice"> </label>
<input type="text" v-model="list.price" class="form-control"/>
</div>
<div class="form-group">
<label for="bookcount" id="bookcount"> </label>
<input type="text" v-model="list.count" class="form-control"/>
</div>
<div class="form-group">
<button class="btn btn-primary" @click="add"> </button>
</div>
</div>
스 크 립 트 부분
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
books:[
{name:'VUE js',price:40,count:1},
{name:'NODE js',price:20,count:1},
{name:'REACT js',price:30,count:1},
{name:'ANGULAR js',price:100,count:1},
{name:'JQUERY js',price:50,count:1},
],
list:{
name:'',
price:'',
count:''
}
},
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:'',
price:'',
count:''
}
}
},
computed:{
total(){
var sum = 0;
this.books.forEach(item =>{
sum += item.price*item.count;
})
return sum;
}
}
});
</script>
난점 에 부 딪 혀 총 결 하 다.수량 이 0 보다 적 을 때 판단 방법,해결 방법 은 여러 가지 가 있 는데 다음은 세 가지 방법 이 있다.
(1)가장 쉬 운 방법
논리 적 판단 에 따라 논리 적 판단 의 순 서 를 주의해 야 한다.코드 는 다음 과 같다.
(2)여기 서 this 가 가리 키 는 문제 에 주의해 야 한다.
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 실행 시 질문 전달
min(book){
if(book.count>0){
book.count = parseInt(book.count) - 1;
}
}
요약:v-on 실행 방법 을 수행 할 때 매개 변 수 를 전달 해 야 할 때()를 추가 하고 전달 매개 변수 가 필요 하지 않 으 면 추가 하지 않 아 도 됩 니 다()
매개 변 수 를 전달 하려 면 이벤트 원본 을 수 동 으로 전송 해 야 합 니 다.
제안:
1.vue 를 공부 할 시간 이 충분 하 다 면 js 기반 을 다 져 angular.js 를 배 워 야 합 니 다.
2.인터넷 에서 자 료 를 찾 는 것 을 배 웁 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.