溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
年后公司的項目要求用到vue.js知識，我angular沒有學，node.js和react也只是了解了一點點，所以學起來比較困難。如果你想學vue.js的知識，推薦網址：http://vuejs.org/
詳細內容如下：
一、圖書管理demo用的知識點
1、bootstrap：http://getbootstrap.com/
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時，判斷方法，解決方法有很多種，下面總結有3中方法
(一)最簡單的方法
根據邏輯判斷，這里要注意邏輯判斷的順序，代碼如下：
（二）這里要注意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:''
}
}
}
(三) v-on執行時傳參問題
min(book){
if(book.count>0){
book.count = parseInt(book.count) - 1;
}
}
總結：
v-on執行方法的時候需要傳遞參數的時候添加()，如果不需要傳遞參數就不用加上()
如果需要傳遞參數，我們需要手動傳入事件源
建議：
1、如果您有充足的時間來學習vue，務必要把js基礎打好，學習下angular.js
2、學會在網上找資料。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
