标签：VUE errors price list 购物车 num goods var
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</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 table-striped">
<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>
标签：VUE,errors,price,list,购物车,num,goods,var 来源： https://www.cnblogs.com/superzwb/p/15178442.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。