Some time ago I heard a while so this is the case, you should quickly learned how to work in an industry where skills, then you first master the core areas 20% of the skills, according to twenty-eight theorem, mastered 20% of the skills and knowledge you will be able to solve 80% of problems in this area.
We all know that learning vue most classic is the most representative of the demo shopping cart. Today finally calm down and share with you the case himself in a shopping cart.
1. To achieve the effect as shown in FIG.
Page is very simple, all functions and display are listed in a simple table inside
2. Functional Requirements
a. the number of columns inside merchandise click on addition and subtraction to achieve the number of goods and subtraction, or when the direct input of the input box, the amount and the total amount is also changed,
b. Click on the check box options to achieve the radio click Select All Select All to achieve, click Cancel Select Cancel Select realized, the total amount is also changed
c. Click Delete to delete functions to achieve, the total amount is also changed
3. Finishing the code below
<template> <div id="app"> <router-view></router-view> <table border="1" width="100%" cellspacing="0" height="200px"> <tr> <th ></th> <th>商品名称</th> <th>商品单价</th> <th>>TH</Quantity <th>金额</th> <th>操作</th> </tr> <tr v-for="(item,index) in cartlist" :key="item.id"> <td><input type="checkbox" @click="dainji(item,flag)" :checked="item.checked"></td> <td>{{item.title}}</td> <td>{{item.price| rounding}}</td> <td><button @click="changeNumber(item,false)">-</button><input type="text" :value="item.number" @change="change1($event,item)"><button @click="changeNumber(item,true)">+</button></td> <td>{{item.price*item.number|rounding}}</td> <td><el-button @click="deleteList(index)">删除</el-button></td> </tr> <tr> <td><button @click="chooseAll(cartlist,true)">全选</button></td> <td><button @click="chooseAll(cartlist,false)">取消全选</button></td> <td>总金额</td> <td>：</td> <td>{{total|rounding}}</td> <td><el-button @click="goPage">跳转1</el-button> <router-link to="/test"><el-button>跳转2</el-button></router-link></td> </tr> </table> </div> </template> <script> export default { name: 'App', data(){ return{ cartlist:[], flag:false, total:0, isShow:false } }, components:{ }, mounted(){ this.getGoodsList() }, compute:{ total(){ } }, filters: { rounding (value) { return parseInt(value).toFixed(2) } }, methods:{ getGoodsList(){ this.$http.post("/posts4").then(res => { console.log(res.data.posts); let cartlist1 =res.data.posts this.cartlist= cartlist1 }) }, change1(e,item){ item.number=e.target.value }, changeNumber(data,flag){ if(flag==true){ data.number+=1; this.computemoney() }else{ data.number-=1 this.computemoney() if(data.number<1){ data.number=1 } } }, dainji(item){ if(typeof item.checked=='undefined'){ this.$set(item,'checked',true) this.computemoney() console.log(item) }else{ console.log(item) item.checked=!item.checked this.computemoney() } }, chooseAll(data,flag){ data.forEach(item => { if(flag){ if(typeof item.checked=='undefined'){ this.$set(item,'checked',true) this.computemoney() }else{ if(item.checked==true){ return false }else{ item.checked=true this.computemoney() } } }else{ if(typeof item.checked=='undefined'){ this.$set(item,'checked',false) }else{ if(item.checked==true){ item.checked=false this.computemoney() }else{ return false } } } }); }, computemoney(){ this.total=0 this.cartlist.forEach((item)=>{ if(item.checked==true){ this.total+=item.price*item.number } }) }, deleteList (Number The) { console.log (Number The) . Message $ ({// this.isShow = to true the this $ Confirm The (. ' This will permanently delete the file, whether to continue? ' , ' tips ' , { confirmButtonText: ' OK ' , cancelButtonText: ' cancel ' , type: ' warning ' .}) the then (() => { the console.log (Number) the this .cartlist.splice (Number, . 1 ) the this of the type: ' Success ' , the Message: ' deleted successfully! ' }); the this .computemoney () }). the catch (() => { the this $ the Message ({. of the type: ' info ' , the Message: ' undeleted ' }); }); }, goPage () { the this . $ router.push ({name: ' Dialog ' }) } } } </ Script > < style > #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
4. implementing the functions corresponding to the respective source
. A realization + - Amount
page
<td><button @click="changeNumber(item,false)">-</button>
<input type="text" :value="item.number" @change="change1($event,item)">
<button @click="changeNumber(item,true)">+</button></td>
method
change1(e,item){
item.number=e.target.value
},
changeNumber(data,flag){
if(flag==true){
data.number+=1;
this.computemoney()
}else{
data.number-=1
this.computemoney()
if(data.number<1){
data.number=1
}
}
},
Analysis: Because the business logic is a plus or minus two buttons to achieve the reduction or item.number + can, therefore using the same method by setting the value of the flag are true or false is determined to make the number of subtraction implemented inside
Not the focus of this one, the focus is how to directly modify the input box value change where change item.number thus can effect a change in the amount, which is a major change inside the input method to get the value of the input box by e.target.value , item.number = e.target.value last assigned number
b. implement the radio, select all and deselect all
page
<td><input type="checkbox" @click="dainji(item,flag)" :checked="item.checked"></td>
<td><button @click="chooseAll(cartlist,true)">全选</button></td>
<td><button @click="chooseAll(cartlist,false)">取消全选</button></td>
method
dainji(item){
if(typeof item.checked=='undefined'){
this.$set(item,'checked',true)
this.computemoney()
console.log(item)
}else{
console.log(item)
item.checked=!item.checked
this.computemoney()
}
},
chooseAll(data,flag){
data.forEach(item => {
if(flag){
if(typeof item.checked=='undefined'){
this.$set(item,'checked',true)
this.computemoney()
}else{
if(item.checked==true){
return false
}else{
item.checked=true
this.computemoney()
}
}
}else{
if(typeof item.checked=='undefined'){
this.$set(item,'checked',false)
}else{
if(item.checked==true){
item.checked=false
this.computemoney()
}else{
return false
}
}
}
});
},
computemoney(){
this.total=0
this.cartlist.forEach((item)=>{
if(item.checked==true){
this.total+=item.price*item.number
}
})
},
Analytical thinking:
The first step: to achieve dynamic binding by Radio checkbox: checked = "item.checked" Click achieve the selected while the selected attribute flags simultaneously set into the item inside the object, there is no data in the background and whether selected attribute, so when a click on a check box is when you need to add your own into this. $ set (item, ' checked', true), such an operation not only makes the check box is selected, and also to the item this object inserted inside an attribute and corresponding values. So the question is when they are clicked every time I need to insert it, so before setting this value needs to determine what the item inside the property, IF (typeof item.checked == 'undefined') {} This is the judgment code is triggered when we click on the check box before passing inside if we inserted through (set too checked) we only need to invert the property, otherwise set,
IF (typeof item.checked == 'undefined') { the this. $ SET (Item, 'the checked', to true) this.computemoney () the console.log (Item) } {the else the console.log (Item) item.checked = ! item.checked this.computemoney () } },
I believe you can now understand the logic of this step of it! You will definitely want why should I do it? To not worry, ye have just now said to the radio, there is a Select
Step two: just realized the function of this step is not difficult, we at the same time click Select All we need to do is to let each a item.checked = true, then we need to do two judgments, the first layer function checked to determine whether this attribute,
the second judge whether the current checked property is true if there is no will traverse the list to add the item to the property, otherwise directly modify
IF (typeof item.checked == 'undefined') { the this. $ SET (Item, 'the checked', to true) this.computemoney () } {the else IF (== item.checked to true) { return to false } the else { Item = to true .checked this.computemoney () } }
followed by a Deselect All business logic is exactly the same as each checked need to set to false, and therefore the same process to set a flag, true when Select, false Uncheck All
chooseAll(data,flag){ data.forEach(item => { if(flag){ if(typeof item.checked=='undefined'){ this.$set(item,'checked',true) this.computemoney() }else{ if(item.checked==true){ return false }else{ item.checked=true this.computemoney() } } }else{ if(typeof item.checked=='undefined'){ this.$set(item,'checked',false) }else{ if(item.checked==true){ = false item.checked this.computemoney () } the else { return false } } } }); },
and now we have achieved Select and deselect all features of the page, followed by calculating the total amount of the
third step: to achieve total amount idea is very simple through the list to select a calculation selected and superimposed
computemoney(){
this.total=0
this.cartlist.forEach((item)=>{
if(item.checked==true){
this.total+=item.price*item.number
}
})
},
The fourth step in all of the selected item in
item.price * item.number, being selected, and increase the number of places call this method, this place is not very well written, I think you can have a better implementation. Here it is where I need to call this method invokes a bit.
The final step: Delete function to achieve this is very simple method which pass into the Mahjong index
deleteList (Number The) {
console.log (Number The)
// = this.isShow to true
the this $ Confirm The ( 'This will permanently delete the file, whether to continue?', 'tips', {.
confirmButtonText: 'OK',
cancelButtonText: 'cancel',
type: 'warning'
}) the then (() => {.
the console.log (Number)
this.cartlist.splice (Number,. 1)
the this Message $ ({.
type: 'Success',
Message:' ! deleted successfully '
});
this.computemoney ()
.}) the catch (() => {
. the this $ the Message ({
of the type:' info ',
the Message:' undeleted '
});
});
}
this.cartlist.splice (number, 1) This is the key to achieve the core code deleted.
This project has been completed to La La La La, in front of the screen do not know whether you understand it? If you have a better way to welcome you achieve together and communicate with me ye who grow up with it!
I hope this helps you, like a point and then go, hoping to encourage it!
