<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
input[type="text"] {
border: none;
text-align: center;
outline: none;
width: 30px;
}
.jiajian {
border: 1px solid #333;
border-radius: 10px;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
cursor: pointer;
color: #333333;
}
.xuanzhong {
color: darkorange;
}
img {
width: 100px;
height: 100px;
}
tr>th,
tr>td {
width: 130px;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<table border="0" cellspacing="" cellpadding="">
<tr style="display: flex;align-items: center;">
<th >
<span @click="allselect">全选</span>
/
<span @click="allcancel">全不选</span>
</th>
<th>商品名</th>
<th>商品图片</th>
<th>单价</th>
<th>数量</th>
</tr>
<tr v-for="(item,index) in arr" :class="{xuanzhong:item.checked}" style="display: flex;align-items: center;">
<td>
<input type="checkbox" v-model="item.checked" />
</td>
<td>{{item.name}}</td>
<td>
<img v-bind:src="item.imgUrl">
</td>
<td>{{item.price}}</td>
<td style="display: flex;justify-content: center;color: #333333;">
<span class="jiajian" @click="if(--item.count == 0) item.count=1">-</span>
<span style="margin: 0 10px;width: 20px;">{{item.count}}</span>
<span class="jiajian" @click="item.count++">+</span>
</td>
</tr>
</table>
总价：<span>{{total.toFixed(2)}}</span>
<br> <button type="button" @click="del">删除所选内容</button>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
computed: {
total() {
let sum = 0;
this.arr.map((item, index) => {
if (item.checked) sum += item.price * item.count
})
return sum
}
},
data: {
arr: [{
name: '手机',
imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=400&h=400&f=webp&q=90',
price: 10.1,
count: 1,
checked: true
}, {
name: '电视',
imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ef4c68fed730ec26bf2fa0ff620975c5.jpg?thumb=1&w=400&h=400&f=webp&q=90',
price: 110.1,
count: 1,
checked: true
}, {
name: '洗衣机',
imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ec20453216dcd42f982cffe5fdbc3115.jpg?thumb=1&w=400&h=400&f=webp&q=90',
price: 210.1,
count: 1,
checked: false
}, {
name: '耳机',
imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/50649d7b5706f4cd9f658e93db6b6564.jpg?thumb=1&w=400&h=400&f=webp&q=90',
price: 20.1,
count: 1,
checked: false
}]
},
methods: {
handleChange(value) {
console.log(value);
},
del() {
var xuanzhong = false;
this.arr.map((item, index) => {
if (item.checked) {
xuanzhong = true;
}
})
if (!xuanzhong) {
alert('请打勾')
return;
}
this.arr = this.arr.filter(item => !item.checked)
if (this.arr.length == 0) {
window.location.href = 'none.html'
}
},
allselect() {
this.arr.map(item => item.checked = true)
},allcancel(){
this.arr.map(item => item.checked = false)
}
}
});
</script>
</html>
浙公网安备 33010602011771号