This is the rendering. It seems very simple. Have you been writing Jquery code for a long time, always thinking about DOM operation? I haven't switched over for a long time. Finally, Vue's attributes are used for control, and the function of multiple attribute selection is realized
Directly on the source code!
- index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Shopping cart example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> </head> <body> <div id="app" v-cloak> <template v-if="list.length"> <table> <thead> <tr> <th> <input type="checkbox" @click="allCheck()"> </th> <th>number</th> <th>Trade name</th> <th>item pricing</th> <th>Purchase quantity</th> <th>operation</th> </tr> </thead> <tbody> <tr v-for="(item,index) in list"> <td> <input type="checkbox" :checked="isAllCheck" @click="tab(index)"> </td> <td> {{ index+1 }} </td> <td> {{ item.name }} </td> <td> {{ item.price }} </td> <td> <button @click="deleteto(index)">-</button> {{ item.count }} <button @click="add(index)"> +</button> </td> <td> <button @click="remove(index)">remove</button> </td> </tr> </tbody> </table> <div> Total price:$ {{ totalPrice }} </div> </template> <div v-else> Shopping cart is empty </div> </div> <script src="../vue.js"></script> //If this path needs to be modified, we won't talk about it <script src="index.js"></script> </body> </html>
- index.js
var app = new Vue({ el: "#app", data: { list: [{ //Simulate the data obtained by ajax id: 1, name: "iphone7", price: 6188, count: 1, isCheck: false }, { id: 2, name: "ipad pro", price: 5888, count: 1, isCheck: false }, { id: 1, name: "Mac", price: 21488, count: 1, isCheck: false } ], isAllCheck: false }, computed: { totalPrice() { if (!this.isAllCheck) return 0 //Select all cancel return to 0 //Filter is used to filter out some elements of Array and return the remaining elements let check = this.list.filter(item => item.isCheck) //Pass in list to judge list.isCheck true/false if (check.length == 0) return 0 //All unchecked return to 0 let total = 0; for (var i = 0; i < check.length; i++) { var item = check[i]; total += item.price * item.count; //Price * quantity } return total; } }, methods: { deleteto(index) { if (this.list[index].count == 1) {} else { this.list[index].count--; } }, add(index) { this.list[index].count++; }, remove(index) { this.list[index].count = 0 }, tab(index) { this.list[index].isCheck = this.list[index].isCheck ? false : true //Toggle whether or not selected }, allCheck() { this.isAllCheck = !this.isAllCheck if (this.isAllCheck) { this.list.map(item => { item.isCheck = true }) } } } })
- style.css
[v-cloak]{ display: none; } table{ border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; empty-cells: show; } th,td{ padding: 8px 16px; border: 1px solid #e9e9e9; text-align: left; } th{ background: #f7f7f7; color: #5c6b77; font-weight: 600; white-space: nowrap; }
This function uses Vue, and the code is easy to understand. Compared with the native code, it is easy to read or code. I hope you can see this case, study hard, and don't waste time, especially for college students
It's too late tonight. It's over