<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> <link rel="stylesheet" type="text/css" href="css/bootstrap4.min.css" /> </head> <body> <div id="app" style="width: 1000px;margin: 0 auto;"> <form style="margin-bottom: 100px;"> <div class="form-group"> <label for="exampleInputEmail1">商品名稱：</label> <input type="text" class="form-control" placeholder="請輸入商品名稱(任意字符2-16位)" style="width: 500px;" v-model="goods_name"> </div> <div class="form-group"> <label for="exampleInputPassword1">商品單價：</label> <input type="text" class="form-control" placeholder="請輸入商品單價(保留兩位小數)" style="width: 500px;" v-model="goods_price"> </div> <button type="button" class="btn btn-primary" @click="add">立即添加</button> <p v-for="(v,k) in errors"> {{v}} </p> </form> <input type="text" class="form-control" style="margin: 10px 0;width: 500px;" placeholder="請輸入商品名稱進行搜索" v-model="word"> <table class="table"> <thead class="thead-light"> <tr> <th scope="col"></th> <th scope="col">商品ID</th> <th scope="col">商品名稱</th> <th scope="col">商品單價</th> <th scope="col">商品數量</th> <th scope="col">商品小計</th> <th scope="col">操作</th> </tr> </thead> <tbody> <tr v-for="(v,k) in result"> <th scope="row"> <input type="checkbox" v-model="v.is_check"> </th> <td>{{v.id}}</td> <td>{{v.name}}</td> <td>{{v.price.toFixed(2)}}</td> <td> <button type="button" class="btn btn-primary" @click="jia(k)">+</button> {{v.num}} <button type="button" class="btn btn-primary" @click="jian(k)">-</button> </td> <td>{{v.sum_price.toFixed(2)}}</td> <td> <button type="button" class="btn btn-danger" @click="del(k)">刪除</button> </td> </tr> </tbody> </table> <p> <button type="button" class="btn btn-primary" @click="allCheck">全選</button> <button type="button" class="btn btn-primary" @click="noCheck">全不選</button> <button type="button" class="btn btn-primary" @click="unCheck">反選</button> <button type="button" class="btn btn-danger" @click="allDel">批量刪除</button> 當前選中商品數為：<span style="color: red;">{{goods_count}}</span>   總價：<span style="color: red;">{{goods_sum}}</span> </p> </div> </body> </html> <script> new Vue({ el: '#app', computed: { result() { if (this.word == '') { return this.list } else { var obj = this var arr = [] this.list.map(function(v) { if (v.name.indexOf(obj.word) > -1) { arr.push(v) } }) return arr } }, goods_count() { var num = 0; //默認數量為0 this.list.map(function(v) { if (v.is_check) { num += 1 } }) return num }, goods_sum() { var price = 0; this.list.map(function(v) { if (v.is_check) { price += v.sum_price } }) return price.toFixed(2) } }, methods: { add() { if (this.validate() == 0) { var obj = { id: this.list.length+1, name: this.goods_name, price: Number(this.goods_price), num: 1, sum_price: Number(this.goods_price), is_check: false } this.list.push(obj) } }, validate() { this.errors = [] if (this.goods_name == '') { this.errors.push('商品名稱必須填寫') } else { var reg = /^[\u4e00-\u9fa5\w]{2,16}$/i if (!reg.test(this.goods_name)) { this.errors.push('商品名稱為2-16位任意字符') } } if (this.goods_price == '') { this.errors.push('商品價格必須填寫') } else { var reg = /^\d+\.\d{2}$/ if (!reg.test(this.goods_price)) { this.errors.push('商品價格保留兩位小數') } } return this.errors.length }, jia(k) { //最終的數量等於原來的數量+1 var last_num = this.list[k].num + 1 >= 5 ? 5 : this.list[k].num + 1 //計算小計 this.list[k].sum_price = last_num * this.list[k].price //將數量替換一下 this.list[k].num = last_num }, jian(k) { //最終的數量等於原來的數量-1 var last_num = this.list[k].num - 1 <= 1 ? 1 : this.list[k].num - 1 //計算小計 this.list[k].sum_price = last_num * this.list[k].price //將數量替換一下 this.list[k].num = last_num }, del(k) { var res = confirm('您確定要刪除嗎？') if (res) { this.list.splice(k, 1) } }, allCheck() { this.list.map(function(v) { if (v.is_check == false) { v.is_check = true } }) }, noCheck() { this.list.map(function(v) { if (v.is_check) { v.is_check = false } }) }, unCheck() { this.list.map(function(v) { if (v.is_check) { v.is_check = false } else { v.is_check = true } }) }, allDel() { var new_arr = [] this.list.map(function(v) { if (v.is_check == false) { new_arr.push(v) } }) this.list = new_arr } }, data: { errors: [], goods_name: '', goods_price: '', word: '', list: [{ id: 1, name: '充氣達達', price: 20.01, num: 1, sum_price: 20.01, is_check: false }, { id: 2, name: '充氣鵬鵬', price: 99.99, num: 1, sum_price: 99.99, is_check: false }, { id: 3, name: '充氣安韓', price: 33.33, num: 1, sum_price: 33.33, is_check: false }, { id: 4, name: '潔鵬洗面奶', price: 9.9, num: 1, sum_price: 9.9, is_check: false }, { id: 5, name: '潔鵬床上用品/套', price: 500, num: 1, sum_price: 500, is_check: false } ] } }) </script>