<!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=" 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=" 500px;" v-model="goods_name"> </div> <div class="form-group"> <label for="exampleInputPassword1">商品单价：</label> <input type="text" class="form-control" placeholder="请输入商品单价(保留两位小数)" style=" 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; 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-u9fa5w]{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>