标签：vue obj sum 改查 price num goods 增删 check
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap4.min.css"/>
</head>
<body>
<div id="app">
<input type="text" placeholder="请输入商品名称" class="form-control" style="width: 300px;margin: 20px;" v-model="word">
<table class="table">
<tr>
<th>选择</th>
<th>序号</th>
<th>商品图片</th>
<th>商品名称</th>
<th>商品单价</th>
<th>商品小计</th>
<th>购买数量</th>
<th>操作</th>
</tr>
<tr v-for="(v,k) in res">
<th><input type="checkbox" v-model="v.is_check"></th>
<th>{{k+1}}</th>
<th><img :src="v.goods_img" alt="无法识别" width="100" height="100"></th>
<th>{{v.goods_name}}</th>
<th>{{v.goods_price.toFixed(2)}}</th>
<th>{{v.goods_sum.toFixed(2)}}</th>
<th>
<button type="button" class="btn btn-primary" @click="jian(k)">-</button>
{{v.goods_num}}
<button type="button" class="btn btn-primary" @click="jia(k)">+</button>
</th>
<th>
<button type="button" class="btn btn-danger" @click="del(k)">删除</button>
</th>
</tr>
</table>
<p>
您当前选中<label style="color: red;font-size: 20px;font-weight: bold;">{{count}}</label>件商品，
总价为：￥<label style="color: red;font-size: 20px;font-weight: bold;">{{priceSum}}</label>
</p>
<button type="button" class="btn btn-primary" @click="fun1()">全选</button>
<button type="button" class="btn btn-primary" @click="fun2()">全不选</button>
<button type="button" class="btn btn-primary" @click="fun3()">反选</button>
<button type="button" class="btn btn-danger" @click="fun4()">批量删除</button>
</div>
</body>
</html>
<script>
new Vue({
el:"#app",
data:{
word:'',
list:[
{
goods_name:'李白-凤求凰',//名称
goods_img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=182292951,1294008673&fm=26&gp=0.jpg',//图片
goods_price:1688,//单价
goods_num:1,//购买数量
goods_sum:1688,//小计
is_check:false
},
{
goods_name:'镜-炽热神光',//名称
goods_img:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1257477182,1700333640&fm=11&gp=0.jpg',//图片
goods_price:1688,//单价
goods_num:1,//购买数量
goods_sum:1688,//小计
is_check:false
},
{
goods_name:'露娜-紫霞仙子',//名称
goods_img:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=162561561,435847683&fm=26&gp=0.jpg',//图片
goods_price:888,//单价
goods_num:1,//购买数量
goods_sum:888,//小计
is_check:false
},
{
goods_name:'孙悟空-地狱火',//名称
goods_img:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2932847835,1578465715&fm=26&gp=0.jpg',//图片
goods_price:1688,//单价
goods_num:1,//购买数量
goods_sum:1688,//小计
is_check:false
},
{
goods_name:'貂蝉-异域舞娘',//名称
goods_img:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=381785760,2363478747&fm=15&gp=0.jpg',//图片
goods_price:288,//单价
goods_num:1,//购买数量
goods_sum:288,//小计
is_check:false
}
]
},
methods:{
jia(index){
var obj = this.list[index]
obj.goods_num++
obj.goods_sum = obj.goods_num*obj.goods_price
},
jian(index){
var obj = this.list[index]
obj.goods_num = obj.goods_num-1 <= 1 ? 1 : obj.goods_num-1
obj.goods_sum = obj.goods_num*obj.goods_price
},
del(index){
if(confirm('确定要删除吗？')){
this.list.splice(index,1)
}
},
fun1(){
this.list.map(function(v,k){
v['is_check'] = true
})
},
fun2(){
this.list.map(function(v,k){
v['is_check'] = false
})
},
fun3(){
this.list.map(function(v,k){
if(v['is_check']){
v['is_check'] = false
}else{
v['is_check'] = true
}
})
},
fun4(){
if(confirm('确定要删除所选内容吗？')){
//把不删除的拿出来
var arr = []
this.list.map(function(v,k){
if(v['is_check']==false){
arr.push(v)
}
})
this.list = arr
}
}
},
computed:{
res(){
var word = this.word
if(word==''){
return this.list
}else{
var arr = []
this.list.map(function(v,k){
if(v.goods_name.indexOf(word)>-1){
arr.push(v)
}
})
return arr;
}
},
count(){
var i=0
this.list.map(function(v,k){
if(v['is_check']){
i+=1
}
})
return i;
},
priceSum(){
var i=0;
this.list.map(function(v,k){
if(v['is_check']){
// console.log();
i += v['goods_sum']
}
})
return i.toFixed(2);
}
}
})
</script>
标签：vue,obj,sum,改查,price,num,goods,增删,check 来源： https://www.cnblogs.com/hao1997918/p/14877963.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。